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

【问题标题】：How to get a style value of an element - jQuery [duplicate]如何获取元素的样式值 - jQuery [重复]
【发布时间】：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)。
stackoverflow.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 不同。最好分配一个类、属性或数据属性，然后使用它来指示颜色。

【讨论】：