使用javascript設置盒子陰影的麻煩

Question

我使用顏色小偷從每個圖像中提取主色，並將該顏色設置爲圖像上的陰影框。有4個圖像顯示，所以我將它們存儲在一個數組中，循環通過從每個圖像中提取主色的數組，並將其設置爲每次通過循環的boxShadow。我無法弄清楚我的代碼有什麼問題，因爲沒有任何事情發生，任何幫助都將不勝感激！

JS：

var slides = document.getElementsByClassName('slideImg'); 

    for (var i = 0; i < slides.length; i++) { 
    var sourceImage = slides[i]; 
    var colorTheif = new ColorThief(); 
    var color = colorTheif.getColor(sourceImage); 
    slides[i].style.boxShadow = "inset 0 0 0 350px color"; 
    }; 

HTML：

<div class="opinion"> 
    <div class="wrap"> 
    <div class="atable"> 
     <?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?> 
     <?php while (have_posts()) : the_post(); ?> 
     <div class="acell"> 
      <div class="contentbox"> 
      <?php $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, 'issues'), 'large_size'); 
      $url = $thumb['0']; ?> 

      <ul class="slides"> 
       <li><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>" ><?php the_post_thumbnail('issues', array('class' => 'slideImg')) ?><span class="yo"><?php the_title(); ?></span></a></li> 
      </ul> 

      <!-- <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><h3><?php the_title(); ?></h3></a> --> 
      </div> 
     </div> 
     <?php endwhile; wp_reset_query(); ?> 
    </div> 
    </div> 
</div> 

CSS：

.opinion .atable .acell .contentbox { 
position: relative; 
} 

.opinion .atable .acell .contentbox img { 
    width: 100%; 
    height: auto; 
    -webkit-border-top-left-radius: 3px; 
    -webkit-border-top-right-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -moz-border-radius-topright: 3px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    display: block; 
    margin-bottom: 15px; 
    position: relative; 
} 

.opinion .atable .acell .contentbox ul { 
    list-style-type: none; 
} 

.opinion .atable .acell .contentbox ul li a { 
    color: white; 
    display: block; 
    height: 200px; 
    max-width: 100%; 
    width: 100%; 
} 

.opinion .atable .acell .contentbox ul li a span { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    padding: 10px 10px 20px 10px; 
    color: #fff; 
    z-index: 10; 
    display: inline-block; 
    font-size: 1.3em; 
    text-shadow: 1px 1px 1px #000; 
    -webkit-border-top-left-radius: 4px; 
    -moz-border-radius-topleft: 4px; 
    border-top-left-radius: 4px; 

Answer 1

在JavaScript中，你不能有一個字符串中的變量，你必須將它添加到字符串與+ operator。

slides[i].style.boxShadow = "inset 0 0 0 350px " + color;