获取所有样式属性颜色

问题描述 投票:0回答:4

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

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

javascript jquery html css
4个回答
3
投票

此函数将返回通过内联样式或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;
}

示例:http://jsfiddle.net/8MqJH/6/


0
投票

试试这个:

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

0
投票

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

$("[style~=color]")

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

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

0
投票

首先是你要获取什么颜色属性的问题,因为有不同的颜色属性(颜色,背景颜色,边框颜色等)。

其次,遍历所有元素使用:

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

每个元素在document.styleSheets中都有一个style属性和一个样式表规则声明。元素中的style属性始终覆盖全局样式表规则。要获取一个所选元素的样式表规则声明,您需要破解{sad smiley ;-(},但您可以使用getComputedStyle(element)获取当前有效的已用样式。

每个具有颜色属性的样式声明都将以rgb(0,0,0)或rgba(0,0,0,0.5)格式保存在所有浏览器中。将rgb值转换为css颜色名称并不容易。

在这个例子中,我抓住当前页面的所有颜色为“background-color”“color”:

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);
});
© www.soinside.com 2019 - 2024. All rights reserved.