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

发布于 2024-11-19 05:22:34 字数 485 浏览 0 评论 0原文

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

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

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

更新

我正在 Firefox 5 中使用 Selenium2 Java API。也许还有一种不用 JQuery 的方法。也许涉及截图？

更新2

我重新表述并扩展了问题：获取图像中特定区域的主色：网页元素的颜色查询

原文

I search a way to determine the real visible color of page elements. If i use JQuery i can do the following:

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

But, the background-color of #foo may return "transparent" even if one of its parents declared a colored background. So, how do i get the correct color which is visible to end users (including half-transparency / RGBA)?

Update

I am using the Selenium2 Java API with Firefox 5. Maybe there is a way without JQuery, too. Involving Screenshots maybe?

Update 2

I rephrased and extended the question: Get dominating color of a specific area in an image: Color Query for Web Page Elements

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小猫一只 2024-11-26 05:22:34

您需要遍历树来查找具有 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 颜色。

这当然也不考虑背景图像，但由于您的问题没有提及它们，而且我的应用程序也不需要考虑它们，所以没有任何需要检查的内容对于图像。

You would need to traverse up the tree to find the element which has a background-color, one approach I did was like this (where textureEl is the element you want to check):

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

    });
}

and

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

but note that my isTransparent function made any non 100% opacity value marked as transparent, if you don't want that, then redefine what to do with rgba colors.

This of course doesn't take into account background-images either, but as your question didn't mention them, nor my application needed to take them into account, there isn't anything there to check for images.

回复收藏 0 原文

~没有更多了~