javascript - 获取 ColorThief 更改框阴影颜色

Question

我将如何完成此脚本以使其编辑#player1 的框阴影颜色？

<script type="text/javascript">
$(window).ready(function(){
    var sourceImage = document.getElementById("art");
    var colorThief = new ColorThief();
    var color = colorThief.getColor(sourceImage);
    document.getElementById("player1").style.['box-shadow'] = "rgb(" + color + ")";
   });
</script>

还有css里面，后面应该放什么

#player1 {box-shadow:() 5px;}

Answer 1

已更新

#player1 的 box-shadow 属性没有必要设置默认值，因为它会在页面加载时由 JavaScript 设置(这你打算做的对吗？)。您可以尝试以下操作:

纯JavaScript

DEMO (RGB value is hard-coded)

$(window).ready(function(){
    var sourceImage = document.getElementById("art");
    var colorThief = new ColorThief();
    var color = colorThief.getColor(sourceImage);
    document.getElementById('player1').style['boxShadow'] = '10px 10px 5px rgba('+ color[0] + ', ' + color[1] + ', ' + color[2] + ', 0.5)';
});

但是，IE 似乎不支持.style['boxShadow']。或者，我建议使用 jQuery，您可以尝试以下方法:

jQuery

DEMO (RGB value is hard-coded)

$(window).ready(function(){
    var sourceImage = document.getElementById("art");
    var colorThief = new ColorThief();
    var color = colorThief.getColor(sourceImage);
    $('#player1').css('box-shadow', '10px 10px 5px rgba('+ color[0] + ', ' + color[1] + ', ' + color[2] + ', 0.5)');
});

此代码片段也适用于 IE。