Javascript 如何在属性内设置唯一ID？

我有一个表，其中的一些列表项编码如下：

<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>

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

第一个描述

我的目的是在

数据缩略图覆盖颜色=”中使用JavaScript。此JavaScript需要两个唯一的id，
图像
（原始图像）和
颜色
（找到的突出颜色），如图所示。
由于我需要使用它来更改覆盖颜色，如何将
颜色
id插入我的
数据缩略图覆盖颜色=”属性？有其他方法吗？
如果问题是如何设置元素的属性，您可以这样做：

<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>

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

我真的不知道您是如何打印
元素的

首先，你的标签在
中，所以基本上你想在“数据缩略图覆盖颜色”中插入一个字符串，对吗？@briosheje我在这里是因为我是一个新手，我不知道什么是正确的方式…但要使用它，我需要将id“颜色”设置到我的属性中，只是使用颜色查找器JavaScriptI我不明白问题所在，这就是问题所在。你期望的结果是什么？我在看这个配色仪，显然只需要图像ID。所以你基本上要做的是给它图像，检索它的“RGB”，并解析数据缩略图覆盖颜色中的RGB？@briosheje，来自脚本页面“此代码段假定页面中有一个id为image的image元素。它还假设有一个id为color的元素，并将其背景设置为图像的主色。“当然，是这样吗？在您的
中，我看到了一些参数，但我不确定如果图像不在DOM中，您是否可以使用该函数。也许您可以尝试将其作为图像对象传递，但根据我在github（）中看到的情况脚本假装接收DOM image元素，该元素可能与一般图像对象不完全相同。数据url的图像是否打印在文档中的某个位置？我不是那种新手：）这里没有人说过你是新手；）我之前说过：D.非常感谢你的时间
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));
}

<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>