Question

如何更改以下内容？
工具提示显示颜色名称的位置，而不是生成的 RGB数字。

<div class="sp-palette-container">
    <div class="sp-palette sp-thumb sp-cf">
        <div class="sp-cf sp-palette-row sp-palette-row-0">
            <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(12, 14, 16)" title="rgb(12, 14, 16)">
                <span class="sp-thumb-inner" style="background-color:rgb(12, 14, 16);"></span>
            </span>
            <span class="sp-thumb-el sp-thumb-light" data-color="rgb(231, 234, 238)" title="rgb(231, 234, 238)">
            <span class="sp-thumb-inner" style="background-color:rgb(231, 234, 238);"></span>
            </span>
            <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(104, 106, 109)" title="rgb(104, 106, 109)">
            <span class="sp-thumb-inner" style="background-color:rgb(104, 106, 109);"></span>
            </span>
            <span class="sp-thumb-el sp-thumb-dark sp-thumb-active" data-color="rgb(208, 14, 0)" title="rgb(208, 14, 0)">
            <span class="sp-thumb-inner" style="background-color:rgb(208, 14, 0);"></span>
            </span>
            <span class="sp-thumb-el sp-thumb-light" data-color="rgb(255, 171, 0)" title="rgb(255, 171, 0)">
            <span class="sp-thumb-inner" style="background-color:rgb(255, 171, 0);"></span>
            </span>
            <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(119, 94, 160)" title="rgb(119, 94, 160)">
            <span class="sp-thumb-inner" style="background-color:rgb(119, 94, 160);"></span>
            </span>
        </div>
    <div class="sp-cf sp-palette-row sp-palette-row-selection"></div>
</div>

Answer 1

如果你知道所有可能的rgb字符串（并且那些很多人都知道），你可以做类似的事情：

var rgbToColorNames = {
    "rgb(255, 0, 0)": "Red",
    "rgb(0, 255, 0)": "Green",
    ...
}

var spans = document.getElementsByClassName("sp-thumb-el");
for (var i = 0, len = spans.length; i < len; ++i) {
    var span = spans[i];
    span.title = rgbToColorNames[span.title];
}

否则无法将rgb值转换回英语。因此，如果rgb值可以是任何值，那么你就有点运气了。也许您可以使用数学将rgb值的范围组合在一起来表示一种颜色。

将工具提示RGB值替换为其颜色名称

1 个答案: