Question

我有一个包含一些列表项的表格，如下所示：

<li data-thumbnail-path="content/media/thumbnails/1.jpg"
    data-url="content/media/images/1.jpg"
    data-thumbnail-overlay-color="#aa4080">
    <div>
        <p class="gallery1DecHeader">First description</p>
    </div>
</li>

我的目的是在data-thumbnail-overlay-color="";内使用ColorFinder JavaScript。此JavaScript需要2个唯一ID，image（原始图片）和color（找到的突出颜色），如此example所示。由于我需要使用它来更改叠加颜色，我如何将color ID插入到我的data-thumbnail-overlay-color="";属性中？有没有不同的方法来做到这一点？

Answer 1

如果问题是如何设置元素的属性，可以这样做：

var color="color";
var li=document.getElementsByTagName('li')[0]; // or another selector
li.setAttribute("data-thumbnail-overlay-color", color);

Answer 2

我真的不知道你是如何打印<li>元素的。

首先，<li内的代码无效，您不应使用＆＃34; - ＆＃34; data中的字符，因此我建议您将HTML更改为：

<li data-thumbnailPath="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-url="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-thumbnailOverlayColor="">
    <div>
        <p class="gallery1DecHeader">First description</p>
    </div>
</li>

注意：此图片是此HTML中的PLACEHOLDER，请将其更改为您自己页面中的内容。

那就是说，只是为了给你一个提示，这里有一个小片段，可以插入data-thumbnailOverlayColor data-thumbnailPath内提供的图像的RGB数据的function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); }的HEX：

Javascript：

首先，我们必须编写一个函数将RGB结果转换为有效的十六进制代码..我们将在此处窃取：RGB to Hex and Hex to RGB

<li>

其次，我们将循环遍历DOM的每个var liIterator = document.getElementsByTagName("li"); for (var i = 0; i < liIterator.length; i++) { var img = new Image(); img.src = liIterator[i].dataset.thumbnailPath; var rgb = new ColorFinder().getMostProminentColor(img); liIterator[i].setAttribute("data-thumbnailOverlayColor", rgbToHex(rgb.r, rgb.g, rgb.b)); }元素，我们将从 data-thumbnailPath 创建图像对象 。从该图像对象，我们将临时创建一个ColorFinder实例，检索最突出的颜色，并在 data-thumbnailOverlayColor 中找到它：

</body>

输出如下[visual]：

enter image description here

HTML输出是这样的：

enter image description here

可以在这里找到工作小提琴：

http://jsfiddle.net/82bo2wtx/

编辑：

标签元素我错了，＆＃34; - ＆＃34;被接受，但上面的例子也有效。

为了减少您的工作量，以下是适用于您的具体案例的小提琴：您只需在脚本中复制以下内容并将其包含在您的文档中，或者更简单地将其包含在中文档的底部（稍早于<script type="javascript"> var liIterator = document.getElementsByTagName("li"); for (var i = 0; i < liIterator.length; i++) { var img = new Image(); img.src = liIterator[i].dataset["thumbnail-path"]; var rgb = new ColorFinder().getMostProminentColor(img); liIterator[i].setAttribute("data-thumbnail-overlay-color", rgbToHex(rgb.r, rgb.g, rgb.b)); } function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } </script> 之前，请写下：

{{1}}

http://jsfiddle.net/82bo2wtx/1/

**假设你已经包含了COLORFINDER LIBRARY **

如何在属性中设置唯一ID？

2 个答案: