Javascript 获取所有样式属性颜色

我正在寻找一种从网站获取所有css颜色的方法。到目前为止，可以使用document.stylesheets处理内部和外部样式表。问题是，通过css样式属性直接指定给标记的样式将不在此列表中

---

有没有比遍历DOM的所有元素并解析每个标记的样式属性更好的方法？您还有其他想法吗？

您可以尝试使用jQuery选择样式属性包含“颜色”的所有元素

所以如果你想把它们放在一个数组中

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

---

您可以尝试使用jQuery选择样式属性包含“颜色”的所有元素

所以如果你想把它们放在一个数组中

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

试试这个：

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

试试这个：

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

---

此函数将返回通过内联样式或CSS类声明的rgb/rgba颜色数组

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

函数getAllColor（）{ //正则表达式通过http://stackoverflow.com/a/7543829/149636 变量rgbRegex=/^rgba？\（\d+）\s*（\d+）\s*（\d+）（：，\s*（\d+（？：\。\d+））$/； var-allColors=[]； var elems=document.getElementsByTagName（'*'）； var total=元素长度； 变量x，y，elemStyles，styleName，styleValue，rgbVal； 对于（x=0；x

---

示例：

此函数将返回通过内联样式或CSS类声明的rgb/rgba颜色数组

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

函数getAllColor（）{ //正则表达式通过http://stackoverflow.com/a/7543829/149636 变量rgbRegex=/^rgba？\（\d+）\s*（\d+）\s*（\d+）（：，\s*（\d+（？：\。\d+））$/； var-allColors=[]； var elems=document.getElementsByTagName（'*'）； var total=元素长度； 变量x，y，elemStyles，styleName，styleValue，rgbVal； 对于（x=0；x

---

示例：

首先是要获取什么颜色属性的问题，因为有不同的属性（颜色、背景颜色、边框颜色等）

其次，要遍历所有元素，请使用：

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

每个元素在document.styleSheets中都有一个样式属性和可选的样式表规则声明。元素中的样式属性始终覆盖全局样式表规则。要获取一个选定元素的样式表规则声明，您需要hacks{sad smiley；-（}），但您可以使用getComputedStyle（元素）获取当前使用的有效样式

在所有浏览器中，具有颜色属性的每个样式daclaration都将以rgb（0，0，0）或rgba（0，0，0，0.5）格式保存。 将rgb值转换为css颜色名称并非易事

在本例中，我获取当前页面的所有颜色作为“背景色”“颜色”：

---

首先是要获取什么颜色属性的问题，因为有不同的属性（颜色、背景颜色、边框颜色等）

其次，要遍历所有元素，请使用：

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

每个元素在document.styleSheets中都有一个样式属性和一个可选的样式表规则声明。元素中的样式属性始终覆盖全局样式表规则。要获取一个选定元素的样式表规则声明，需要hacks{sad smiley；-（}，但可以使用getComputedStyle（元素）获取当前有效的已用样式

在所有浏览器中，具有颜色属性的每个样式daclaration都将以rgb（0，0，0）或rgba（0，0，0，0.5）格式保存。 将rgb值转换为css颜色名称并非易事

在本例中，我获取当前页面的所有颜色作为“背景色”“颜色”：

---

有更好的方法吗？我不知道。你仍然需要循环所有元素，但是你可以检查样式

style.color

，如果它是空的，就没有任何内联颜色样式，否则它的值就是你想要的颜色。有更好的方法吗？我不知道。你仍然需要循环一个所有元素，而不是解析，您只需检查样式

style.color

，如果它为空，则没有任何内联颜色样式，否则它的值正是您想要的颜色。难以置信，太快了；）非常感谢，这正是我想要的！@G-Wak代码已经更新，因为它在IEW上抛出了一个异常难以置信，如此之快；）非常感谢，这正是我想要的@G-Wak代码已经更新，因为它在IE上抛出了一个异常