jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法

Posted 2023-05-12

参考技术A 使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示【#ffff00】，而IE10,、Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】，由于需要对颜色值进行判断处理，所以需要得到统一的颜色格式，最好是HEX格式的，方便处理点。搜索了一下，从国外的一个网站上得到一段代码：
复制代码
代码如下:
$.fn.getHexBackgroundColor
=
function()


var
rgb
=
$(this).css('background-color');

rgb
=
rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

function
hex(x)
return
("0"
+
parseInt(x).toString(16)).slice(-2);

return
rgb=
"#"
+
hex(rgb[1])
+
hex(rgb[2])
+
hex(rgb[3]);

上面定义的是一个jQuery函数，我们可以通过
$("#bg").getHexBackgroundColor();
获取到标签id="bg"的background-color的RGB值。
下面做一下小小的修改，就是加一个判断，如果是显示HEX值（IE10以下）就直接拿值，如果是非IE浏览器则将值转换成RGB格式：
复制代码
代码如下:
$.fn.getBackgroundColor
=
function()


var
rgb
=
$(this).css('background-color');

if(rgb
>=
0)
return
rgb;//如果是一个hex值则直接返回

else

rgb
=
rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

function
hex(x)
return
("0"
+
parseInt(x).toString(16)).slice(-2);

rgb=
"#"
+
hex(rgb[1])
+
hex(rgb[2])
+
hex(rgb[3]);



return
rgb;

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

【中文标题】如何获取元素的样式值 - 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 不同。最好分配一个类、属性或数据属性，然后使用它来指示颜色。

【讨论】：

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

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