jquery - 使用 JQuery 和/或 Selenium/Webdriver 确定页面元素的可见颜色

Question

我寻找一种方法来确定页面元素的真实可见颜色。如果我使用 JQuery，我可以执行以下操作:

$('#foo').css('background-color');

但是，#foo 的背景色可能会返回“透明”，即使其父级之一声明了彩色背景。那么，如何获得最终用户可见的正确颜色(包括半透明/RGBA)？

更新

我正在将 Selenium2 Java API 与 Firefox 5 一起使用。也许也有一种不用 JQuery 的方法。可能涉及截图？

更新2

我改写并扩展了问题:Get dominating color of a specific area in an image: Color Query for Web Page Elements

Answer 1

您需要向上遍历树以找到具有 background-color 的元素，我所做的一种方法是这样的(其中 textureEl 是您要查找的元素想检查):

bgcolor = $(textureEl).css('background-color'); 
if (isTransparent(bgcolor)){
    $(textureEl).parents().each(function(){
        if (!isTransparent($(this).css('background-color'))){
            bgcolor = $(this).css('background-color');
            return false;
        }

    });
}

和

function isTransparent(bgcolor){
    return (bgcolor=="transparent" || bgcolor.substring(0,4) == "rgba");
}

但请注意，我的 isTransparent 函数将任何非 100% 不透明度值标记为透明，如果您不希望这样，请重新定义如何处理 rgba 颜色.

这当然也没有考虑 background-image，但是由于你的问题没有提到它们，我的应用程序也不需要考虑它们，所以没有任何东西在那里检查图像。