Question

我的网站上有以下颜色作为主题颜色：

#0088cc;

如何通过更改主体类在整个DOM /网页中应用的每个元素上将此颜色替换为另一个颜色？

例如。

if ($('body').hassClass('black')){
   replace all #0088cc with #000;
}

颜色代表所有不同的html颜色：边框，背景，文字颜色等

更新

我发现每个人都没有正确理解这个问题：

我将颜色＃0088cc作为我的主题颜色。现在，身体内的各种元素都将这种颜色作为文本颜色，背景颜色，边框颜色。所以我想用一种新的颜色替换body的子元素（所有具有为某些东西定义的颜色的元素）中的每种颜色，这样我就可以改变整个主题......

我该怎么做？

Answer 1

if ($('body').hassClass('black')){

$(this).css("background","#000"); 
}

Answer 2

你可以使用这个jquery css切换器插件来拥有不同的主题。 http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html

Answer 3

    var hexDigits = new Array
            ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

    //Function to convert hex format to a rgb color
    function rgb2hex(rgb) {
     rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }

    function hex(x) {
      return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
     }
    $(document).ready(function(){
if ($('body').hassClass('black')){
        $("*").each(function(){
         if(rgb2hex($(this).css("color")) == "#0088cc")
                  $(this).css("color","black");
        });}
    });


Here the demo on jsFiddle http://jsfiddle.net/fAMAu/

Answer 4

以下代码会将具有黑色类的所有元素的颜色设置为黑色。但是，您可以在CSS中设置它，而不是将另一种颜色应用于元素

  $.fn.replaceCss = function(properties,find,replaceWith, normalize) {
    find = normalize ? normalize(find) : find;
    return this.each(function(){
      var prop,
          self = $(this), 
          css = self.css(properties);

      for(prop in css){
         if(css.hasOwnProperty(prop)){
           val = normalize ? normalize(css[prop]) : css[prop]
           if(val == find){
             css[prop] = replaceWith;
           }
         }
      }
      self.css(css);
      return this;
    });
   };

然后你可以这样称呼它

$('.black').replaceCss(['color','background-color','another-color-property'],
                       "#0088cc",
                       "#000");

但是，颜色可能会以多种格式返回，因此您可能希望先将它们标准化

    $('.black').replaceCss(['color','background-color','another-color-property'],
                       "#0088cc",
                       "#000",
                       function(val){
                          val = val.replace(/\s/g,"");
                          return val == "rgb(0,136,204)" ? "#0088cc" : val
                       });

Answer 5

    if ($('body').hasClass('black')){ //hope it is a standard hasClass method

      $(this).css("background","#000"); //replace all #0088cc with #000;

      //or for foreground
      $(this).css("color","#000"); //replace all #0088cc with #000;
    }

Answer 6

而不是单独添加所有这些css属性，你可以在单个css类中绑定所有这些属性，然后使用addClass（）方法添加该类（如果需要，可以使用removeClass（））

在jQuery中用另一种颜色替换特定颜色

6 个答案: