通过 jquery 获取 rgba 背景颜色

Posted 2023-02-21

【中文标题】通过 jquery 获取 rgba 背景颜色

【英文标题】：getting rgba background color by jquery

【发布时间】：2014-01-03 04:21:13

【问题描述】：

我有一个带有background-color:rgba(1,0,0,0) 的元素，我需要通过jquery 获取这个值来做某事。我试过$('.overlay').css("backgroundColor")，但它返回transparent。有什么方法可以通过 jquery 获取元素的 rgba 背景颜色？

顺便说一下，这是我的代码：

html：

<div class="overlay"></div>

css：

.overlay  background-color:rgba(1,0,0,0) 

jquery：

$('.overlay').css("backgroundColor");

【问题讨论】：

您使用的是哪个版本的 jQuery？如果我运行您提供的代码，我会返回rgba(1, 0, 0, 0)。见this jsFiddle

我正在使用 jquery-1.10.1 !!

这是一个浏览器问题，在 Firefox 中它返回透明，而在 Chrome 中它返回实际的 css 属性。

@codingstill 那么我可以将它用于 if 语句吗？我想说如果.overlay 的background-color 是例如rgba(1,0,0,0)，做点什么。我可以吗？

为什么需要知道是 rgba(1,0,0,0) 还是 rgba(2,0,0,0)？

【参考方案1】：

正如@codingstill 指出的，Firefox 返回transparent。但你仍然可以这样做：

var bgColor = $('.overlay').css("backgroundColor");    
if(bgColor == 'transparent' || bgColor == 'rgba(1, 0, 0, 0)')
    //do stuff

【讨论】：

这只是一个hack，如果有不同颜色的类似规则怎么办，例如.overlay2 背景颜色：rgba(2,0,0,0) 。此外，在 IE11 中它根本不返回任何内容 :(.

正是codingstill，我的if语句是：if (bgColor == 'rgba(1,0,0,0)) do function A '和else if (bgColor == 'rgba(2,0,0,0)) do function B '！ firefox 会假设两者都是透明的，所以我会在 firefox 中遇到问题吗？或者一般功能是一样的，我的代码可以在 Firefox 和 chrome 等中运行？

@codingstill：确实。你是绝对正确的。它在 IE11 中返回 nothing ？！奇怪...

rbga(2,0,0,0) 也定义了一个类？如果是这样，您可以检查元素是否具有特定的类。 @Lasse 确实很奇怪...

@Pay4m：您究竟在寻找什么？透明度？