假设网页是静态的,并且只有CSS文件或HTML文件本身中存在颜色来源,如何从网页中提取前景背景颜色对。 例如,在Google主页中,一些可能的颜色对将是(假设GOOGLE是文本):
(前景,背景):(蓝色,白色),(红色,白色),(黄色,白色),(绿色,白色),(蓝色,白色),(绿色,白色)。
我正在考虑的方法是我们可以检查网页的DOM树结构,然后从根节点HTML开始。分配给html或CSS中的父标记的(前景,背景)将是其所有子项的默认颜色。但是如果一个孩子属于CSS中的特定类,那么该类中定义的颜色属性将覆盖父颜色。请提供有关此或替代方法/工具的建议,以获得结果。
答案 0 :(得分: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