首页 文章

解析器提取前景背景颜色对

提问于
浏览 次
2

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

（前景，背景）:(蓝色，白色），（红色，白色），（黄色，白色），（绿色，白色），（蓝色，白色），（绿色，白色） .

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

javascript html css colors

1 回答

  • 1

    这是我迭代孩子的功能

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

    我为你创造了一个小提琴here

    回复于

相关问题