獲取所有樣式屬性顏色

Question

我正在尋找一種方法從網站獲取所有CSS顏色。到目前爲止，可以使用document.styleSheets來處理內部和外部樣式表。問題在於，通過CSS樣式屬性直接分配給標籤的樣式不在此列表中。

有沒有比遍歷DOM的所有元素和解析每個標籤的樣式屬性更好的方法？你還有其他建議嗎？

Answer 1

該函數將返回經由內嵌樣式或CSS類

function getAllColors() { 
    // regex via http://stackoverflow.com/a/7543829/149636 
    var rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/; 

    var allColors = []; 

    var elems = document.getElementsByTagName('*'); 
    var total = elems.length; 

    var x,y,elemStyles,styleName,styleValue,rgbVal; 

    for(x = 0; x < total; x++) { 
     elemStyles = window.getComputedStyle(elems[x]); 

     for(y = 0; y < elemStyles.length; y++) { 
      styleName = elemStyles[y]; 
      styleValue = elemStyles[styleName]; 

      if(!styleValue) { 
       continue; 
      } 

      // convert to string to avoid match exceptions 
      styleValue += ""; 

      rgbVal = styleValue.match(rgbRegex); 
      if(!rgbVal) { // property does not contain a color 
       continue; 
      } 

      if(allColors.indexOf(rgbVal.input) == -1) { // avoid duplicate entries 
       allColors.push(rgbVal.input); 
      } 

     } 

    } 

    return allColors; 
} 

實施例中聲明的RGB/RGBA顏色數組：http://jsfiddle.net/8MqJH/6/

Answer 2

你可以嘗試使用jQuery來選擇包含「color」的樣式屬性的所有元素。

$("[style~=color]") 

所以，如果你想把它們放在一個數組中;

var colors = $("[style~=color]").toArray(); 

Answer 3

嘗試這種情況：

var colorArray = []; 
    $("*").each(function(){ 
    var color = $(this).css("color"); 
    if(colorArray.indexOf(color) == -1) { 
     colorArray.push(color); 
    } 
    }); 
    alert(colorArray); 

Answer 4

首先所有的問題是你想要獲取什麼顏色屬性的問題，因爲有不同（顏色，背景顏色，邊框顏色等）。

其次，通過所有的元素迭代使用：

Array.from(document.body.querySelectorAll("*")).forEach(element => 
{ 
    // console.log(element); 
}); 

每個元件具有document.styleSheets style屬性和可選樣式表規則聲明。元素中的style屬性總是覆蓋全局樣式表規則。要獲得一個選定元素的樣式表規則聲明，您需要hacks {悲傷的笑臉;-(}，但是您可以使用getComputedStyle（element）獲取當前有效的使用樣式。

每種樣式都有顏色屬性將在所有瀏覽器中以rgb（0,0,0）或rgba（0,0,0,0.5）格式保存。 將rgb值轉換爲css顏色名稱並不容易。

在這個例子中，我抓取當前頁面的所有顏色的「背景色」，「色」：

document.addEventListener("DOMContentLoaded", event => 
{ 
    let names = ["background-color", "color"]; 
    let colors = []; 

    var rgbColor = 
    { 
     'rgb(240, 248, 255)': 'aliceblue', 
     'rgb(250, 235, 215)': 'antiquewhite', 
     'rgb(0, 255, 255)': 'aqua', 
     'rgb(127, 255, 212)': 'aquamarine', 
     'rgb(240, 255, 255)': 'azure', 
     'rgb(245, 245, 220)': 'beige', 
     'rgb(255, 228, 196)': 'bisque', 
     'rgb(0, 0, 0)': 'black', 
     'rgb(255, 235, 205)': 'blanchedalmond', 
     'rgb(0, 0, 255)': 'blue', 
     'rgb(138, 43, 226)': 'blueviolet', 
     'rgb(165, 42, 42)': 'brown', 
     'rgb(222, 184, 135)': 'burlywood', 
     'rgb(95, 158, 160)': 'cadetblue', 
     'rgb(127, 255, 0)': 'chartreuse', 
     'rgb(210, 105, 30)': 'chocolate', 
     'rgb(255, 127, 80)': 'coral', 
     'rgb(100, 149, 237)': 'cornflowerblue', 
     'rgb(255, 248, 220)': 'cornsilk', 
     'rgb(220, 20, 60)': 'crimson', 
     'rgb(0, 0, 139)': 'darkblue', 
     'rgb(0, 139, 139)': 'darkcyan', 
     'rgb(184, 134, 11)': 'darkgoldenrod', 
     'rgb(169, 169, 169)': 'darkgray', 
     'rgb(0, 100, 0)': 'darkgreen', 
     'rgb(189, 183, 107)': 'darkkhaki', 
     'rgb(139, 0, 139)': 'darkmagenta', 
     'rgb(85, 107, 47)': 'darkolivegreen', 
     'rgb(255, 140, 0)': 'darkorange', 
     'rgb(153, 50, 204)': 'darkorchid', 
     'rgb(139, 0, 0)': 'darkred', 
     'rgb(233, 150, 122)': 'darksalmon', 
     'rgb(143, 188, 143)': 'darkseagreen', 
     'rgb(72, 61, 139)': 'darkslateblue', 
     'rgb(47, 79, 79)': 'darkslategray', 
     'rgb(0, 206, 209)': 'darkturquoise', 
     'rgb(148, 0, 211)': 'darkviolet', 
     'rgb(255, 20, 147)': 'deeppink', 
     'rgb(0, 191, 255)': 'deepskyblue', 
     'rgb(105, 105, 105)': 'dimgray', 
     'rgb(30, 144, 255)': 'dodgerblue', 
     'rgb(178, 34, 34)': 'firebrick', 
     'rgb(255, 250, 240)': 'floralwhite', 
     'rgb(34, 139, 34)': 'forestgreen', 
     'rgb(255, 0, 255)': 'fuchsia', 
     'rgb(220, 220, 220)': 'gainsboro', 
     'rgb(248, 248, 255)': 'ghostwhite', 
     'rgb(255, 215, 0)': 'gold', 
     'rgb(218, 165, 32)': 'goldenrod', 
     'rgb(128, 128, 128)': 'gray', 
     'rgb(0, 128, 0)': 'green', 
     'rgb(173, 255, 47)': 'greenyellow', 
     'rgb(240, 255, 240)': 'honeydew', 
     'rgb(255, 105, 180)': 'hotpink', 
     'rgb(205, 92, 92)': 'indianred', 
     'rgb(75, 0, 130)': 'indigo', 
     'rgb(255, 255, 240)': 'ivory', 
     'rgb(240, 230, 140)': 'khaki', 
     'rgb(230, 230, 250)': 'lavender', 
     'rgb(255, 240, 245)': 'lavenderblush', 
     'rgb(124, 252, 0)': 'lawngreen', 
     'rgb(255, 250, 205)': 'lemonchiffon', 
     'rgb(173, 216, 230)': 'lightblue', 
     'rgb(240, 128, 128)': 'lightcoral', 
     'rgb(224, 255, 255)': 'lightcyan', 
     'rgb(250, 250, 210)': 'lightgoldenrodyellow', 
     'rgb(211, 211, 211)': 'lightgray', 
     'rgb(144, 238, 144)': 'lightgreen', 
     'rgb(255, 182, 193)': 'lightpink', 
     'rgb(255, 160, 122)': 'lightsalmon', 
     'rgb(32, 178, 170)': 'lightseagreen', 
     'rgb(135, 206, 250)': 'lightskyblue', 
     'rgb(119, 136, 153)': 'lightslategray', 
     'rgb(176, 196, 222)': 'lightsteelblue', 
     'rgb(255, 255, 224)': 'lightyellow', 
     'rgb(0, 255, 0)': 'lime', 
     'rgb(50, 205, 50)': 'limegreen', 
     'rgb(250, 240, 230)': 'linen', 
     'rgb(128, 0, 0)': 'maroon', 
     'rgb(102, 205, 170)': 'mediumaquamarine', 
     'rgb(0, 0, 205)': 'mediumblue', 
     'rgb(186, 85, 211)': 'mediumorchid', 
     'rgb(147, 112, 219)': 'mediumpurple', 
     'rgb(60, 179, 113)': 'mediumseagreen', 
     'rgb(123, 104, 238)': 'mediumslateblue', 
     'rgb(0, 250, 154)': 'mediumspringgreen', 
     'rgb(72, 209, 204)': 'mediumturquoise', 
     'rgb(199, 21, 133)': 'mediumvioletred', 
     'rgb(25, 25, 112)': 'midnightblue', 
     'rgb(245, 255, 250)': 'mintcream', 
     'rgb(255, 228, 225)': 'mistyrose', 
     'rgb(255, 228, 181)': 'moccasin', 
     'rgb(255, 222, 173)': 'navajowhite', 
     'rgb(0, 0, 128)': 'navy', 
     'rgb(253, 245, 230)': 'oldlace', 
     'rgb(128, 128, 0)': 'olive', 
     'rgb(107, 142, 35)': 'olivedrab', 
     'rgb(255, 165, 0)': 'orange', 
     'rgb(255, 69, 0)': 'orangered', 
     'rgb(218, 112, 214)': 'orchid', 
     'rgb(238, 232, 170)': 'palegoldenrod', 
     'rgb(152, 251, 152)': 'palegreen', 
     'rgb(175, 238, 238)': 'paleturquoise', 
     'rgb(219, 112, 147)': 'palevioletred', 
     'rgb(255, 239, 213)': 'papayawhip', 
     'rgb(255, 218, 185)': 'peachpuff', 
     'rgb(205, 133, 63)': 'peru', 
     'rgb(255, 192, 203)': 'pink', 
     'rgb(221, 160, 221)': 'plum', 
     'rgb(176, 224, 230)': 'powderblue', 
     'rgb(128, 0, 128)': 'purple', 
     'rgb(255, 0, 0)': 'red', 
     'rgb(188, 143, 143)': 'rosybrown', 
     'rgb(65, 105, 225)': 'royalblue', 
     'rgb(139, 69, 19)': 'saddlebrown', 
     'rgb(250, 128, 114)': 'salmon', 
     'rgb(244, 164, 96)': 'sandybrown', 
     'rgb(46, 139, 87)': 'seagreen', 
     'rgb(255, 245, 238)': 'seashell', 
     'rgb(160, 82, 45)': 'sienna', 
     'rgb(192, 192, 192)': 'silver', 
     'rgb(135, 206, 235)': 'skyblue', 
     'rgb(106, 90, 205)': 'slateblue', 
     'rgb(112, 128, 144)': 'slategray', 
     'rgb(255, 250, 250)': 'snow', 
     'rgb(0, 255, 127)': 'springgreen', 
     'rgb(70, 130, 180)': 'steelblue', 
     'rgb(210, 180, 140)': 'tan', 
     'rgb(0, 128, 128)': 'teal', 
     'rgb(216, 191, 216)': 'thistle', 
     'rgb(255, 99, 71)': 'tomato', 
     'rgb(64, 224, 208)': 'turquoise', 
     'rgb(238, 130, 238)': 'violet', 
     'rgb(245, 222, 179)': 'wheat', 
     'rgb(255, 255, 255)': 'white', 
     'rgb(245, 245, 245)': 'whitesmoke', 
     'rgb(255, 255, 0)': 'yellow', 
     'rgb(154, 205, 50)': 'yellowgreen' 
    } 

    names.forEach(name => 
    { 
     Array.from(document.body.querySelectorAll("*")).forEach(element => 
     { 
      let style = getComputedStyle(element); 

      let value = style[name]; if(!value) { return; } 
      if(value in rgbColor) { value = rgbColor[value]; } 

      if(!colors.includes(value)) 
      { 
       colors.push(value); 
      } 
     }); 
    }); 

    console.log(colors); 
});