將工具提示RGB值替換爲其顏色名稱

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字符串（有anren't他們中許多人），你可以這樣做：

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值的範圍組合在一起來表示一種顏色。