为具有特定CSS属性的元素添加Class

Add Class To Elements With Specific CSS Property

本文关键字：元素 添加 Class 属性 CSS      更新时间：2023-09-26

我正在创建一个脚本，将迭代'body'下的每个元素，并检查其'background-color'。如果这个背景色与'#eb2c33'匹配，那么脚本将向该元素添加一个类，否则它将移动到下一个元素。我这样做是为了避免进入html并手动将该类放到元素中。这是我的代码。

$(document).ready(function (e) {
        
  $('body *').each(function(index) {
    
         var rgbg = $(this).css('background-color');
         if(rgbg == "#eb2c33")
         {
                $(this).addClass('jcbg');
             
              }
      });
});

现在，如果在特定的div(如header或footer等)上迭代，则此函数可以完美地工作。但是当我遍历整个DOM时，这个函数根本不起作用。请注意，我使用的是csshook，它会给我十六进制的颜色值，而不是rgb，所以请不要这样做。任何帮助吗?

更新:

我现在知道问题了。这是在css钩子从这篇文章，我正在使用。我只是删除了钩子，直接使用了RGB值，它开始完美地工作。这是我更新的代码

$(document).ready(function (e) {
        
     $('body *').each(function(index) {
    
         var rgbg = $(this).css('background-color');
         if(rgbg == "rgb(235, 44, 51)")
         {
                $(this).addClass('jcbg');
             
             }
    });
});

谢谢@Guffa的小提琴。

问题是，jquery返回rgb(…)，即使你声明为十六进制，所以我只是添加了一个函数来翻译十六进制到rgb:

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

然后改编你的代码:

$(document).ready(function (e) {
    // Color to change
    var targetHex = hex2rgb('#eb2c33');
    $('body *').each(function(index) {         
        var rgbg = $(this).css('background-color');
        if(rgbg == 'rgb('+targetHex[0]+', '+targetHex[1]+', '+targetHex[2]+')'){
            $(this).addClass('jcbg');
        }
    });
});

这里是提琴

相关文章：