用于提取前景-背景颜色对的分析器

Parser to extract foreground background color pairs

本文关键字：颜色 分析器 背景 提取 用于      更新时间：2024-04-19

假设网页是静态的，并且只有颜色源存在于CSS文件或HTML文件本身中，那么如何从网页中提取前景-背景颜色对。例如，在谷歌主页中，一些可能的颜色对是（假设Google是文本）：

（前景，背景）：（蓝色，白色），（红色，白色）（黄色，白色）、（绿色，白色）。

我正在考虑的方法是，我们可以检查网页的DOM树结构，然后从根节点HTML开始。在html或CSS中分配给父标记的（前景、背景）将是其所有子标记的默认颜色。但是，如果一个子类属于CSS中的某个特定类，则该类中定义的颜色属性将覆盖父类的颜色。请给出您对此或其他方法/工具的建议以获得结果。

这是我迭代子级的函数

function iterateChildren(elem){
      var child = elem.children();
    $.each(child,function(i,v){
        iterateChildren($(this));
          var pair = {fgHex:rgb2hex($(this).css('color')),bgHex:rgb2hex($(this).css('background-color'))};
      colorPair.push(pair);
      var tmp = {nodeName:$(this).get(0).nodeName,id:$(this).attr('id'),cssClass:$(this).attr('class'),colrhex:rgb2hex($(this).css('color')),colr:$(this).css('color'),bg:$(this).css('background-color'),bgHex:rgb2hex($(this).css('background-color'))};
          result.push(tmp);
    });    
}

你可以这样称呼它：

var elems = $('body');
iterateChildren(elems);

我在这里为您创建了一个小提琴

相关文章：