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

【问题标题】：How could I set a unique ID inside an attribute?如何在属性中设置唯一 ID？
【发布时间】：2015-05-10 12:07:17
【问题描述】：

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

<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=""; 属性中？有没有其他方法可以做到这一点？

【问题讨论】：

所以基本上你想在“data-thumbnail-overlay-color”里面插入一个字符串，对吧？
@briosheje 我在这里是因为我不知道什么是正确的方法，因为我是一个新手编码器......但要使用它，我需要将该 id 设置为“颜色”到我的属性中, 只是为了使用颜色查找器 JavaScript
我没有得到问题，这就是问题所在。您期望的输出是什么？我正在查看这个 ColorFinder，显然只需要图像 ID。所以你基本上想要做的就是给它图像，检索它的“RGB”并解析 data-thumbnail-overlay-color 中的 RGB？
@briosheje 来自脚本页面“此 sn-p 假设您的页面中有一个 id 为 image 的图像元素。它还假设有一个 id 为颜色的元素并设置其背景到图像的主要颜色。”
当然可以，所以？在您的
中，我看到了一些参数，但是如果图像不在 DOM 中，我不确定您是否可以使用该功能。也许您可以尝试将其作为 Image 对象传递，但从我在 github (github.com/pieroxy/color-finder/blob/master/src/…) 中看到的内容来看，该脚本假装接收 DOM 图像元素，这可能与通用图像对象不完全相同。 data-url 的图像是否打印在文档中的某处？

【解决方案1】：

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

首先，<li 中的标签无效，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，把它改成你自己页面里的。

也就是说，只是给你一个提示，这里有一个小 sn-p 来做一些事情，它将插入到 data-thumbnailOverlayColor data-thumbnailPath 中提供的图像的 RGB 数据的 HEX：

Javascript：

首先，我们必须编写一个函数来将 RGB 结果转换为有效的 HEX 代码。我们将在这里窃取它：RGB to Hex and Hex to 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);
}

其次，我们将遍历 DOM 的每个 <li> 元素，我们将从 data-thumbnailPath 创建一个 图像对象。从该图像对象中，我们将临时创建一个 ColorFinder 实例，检索最突出的颜色并在 data-thumbnailOverlayColor 中对其进行解析：

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));
}

输出如下[视觉]：

HTML 输出是这样的：

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

http://jsfiddle.net/82bo2wtx/

编辑：

标签元素我错了，接受“-”，但上面的例子也可以。

为了减少您要做的工作，这里是针对您的特定情况的小提琴：您只需将以下内容复制到脚本中并将其包含在您的文档中，或者更容易，在非常 文档底部（就在</body> 之前，写下：

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

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

** 假设您已经包含了 COLORFINDER 库 **

【讨论】：

我不是那种新手 :)
这里从来没有人说你是新手 ;)
我之前说过：D。非常感谢您的宝贵时间

【解决方案2】：

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

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

【讨论】：