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

Question

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

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

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

更新

我在 Firefox 5 中使用 Selenium2 Java API。也许也有没有 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-images，但是由于您的问题没有提及它们，我的应用程序也不需要考虑它们，因此没有任何东西可以检查图像。