如何获取元素的样式值 - jQuery [重复]

Posted 2023-02-21

【中文标题】如何获取元素的样式值 - jQuery [重复]

【英文标题】：How to get a style value of an element - jQuery [duplicate]

【发布时间】：2014-11-22 10:44:49

【问题描述】：

如何获取 background-color 属性的值

if ($(this).css('background-color') == 'InfoBackground') 

     // it doesn't enter here

【问题讨论】：

background-color 需要一个颜色代码。您可能想查看课程：$(this).hasClass('InfoBackground').

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为 em、ex、px 或 %。不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如 #FFF、#ffffff 和 rgb(255,255,255)。

***.com/questions/5999209/…

第一：背景色应该是一种颜色。二：上面的代码是什么？

或许，InfoBackground 是一个变量？然后，不带引号使用它。

【参考方案1】：

据我所知，jQuery 中的背景颜色输出为rgb()，所以我认为是否有方便的比较方法！

看看THIS的例子，

alert($('#color').css('background-color'));
if($('#color').css('background-color')=='red')
    alert('first if');

它不会进入第一个if，因为$('#color').css('background-color')等于rgb(255,0,0)并且它不匹配red所以它不会进入if条件。

你可以做的，就是给想要的 DOM 一个类，然后检查元素是否有这个类，像这样：

if($('#color').hasClass('red'))
    alert('second if');

这将在其中触发警报。

【讨论】：

我明白了，但是这个呢？ if ($(this).css('background-color') == 'rgb(251,252,197)') // 现在应该输入了吧？

不会了，因为你需要像if ($(this).css('background-color') == 'rgb(251, 252, 197)') 这样在每个半列后放一个空格，现在它会进入，但正如我上面所说的那样不方便，也就是说它不是这样做是个好主意，因为不同浏览器的输出可能不同，最好和最常见的方法是使用我上面提到的类。

【参考方案2】：

您需要检查 InfoBackground 的 RGB 值。

注意以下返回rgb(251, 252, 197)

if ($("#myElement").css('background-color') == 'rgb(251, 252, 197)') 
     alert('hello');

#myElement  background-color: InfoBackground; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="myElement">Hi</div>

---

然而，这似乎是一种善变的方法。不同的浏览器可能表现不同或实现InfoBackground 不同。最好分配一个类、属性或数据属性，然后使用它来指示颜色。

【讨论】：

神秘的否决者？有什么原因吗？

你是对的，你提到了错误但没有写解决方案