1

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

#0088cc;

如何通过更改 body 类在整个 DOM/网页中应用它的每个元素上用另一种颜色替换这种颜色？

例如。

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

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

更新：

我看到每个人都没有正确理解这个问题：

我有颜色#0088cc 作为我的主要主题颜色。现在正文中的各种元素都有这种颜色作为文本颜色、背景颜色、边框颜色。所以我想用一种新颜色替换身体的子元素（所有为某物定义了该颜色的元素）内的每种颜色，这样我就改变了整个主题......

我该怎么做？

4

6 回答 6

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

$(this).css("background","#000"); 
}
于 2013-03-25T11:20:30.803 回答
1

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

于 2013-03-25T11:26:20.603 回答
1 
    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/
于 2013-03-25T11:48:54.740 回答
0

无需单独添加所有这些 css 属性，您可以将所有这些属性合并到一个 css 类中，然后使用 addClass() 方法添加该类（如果需要，请使用 removeClass()）

于 2013-03-25T11:35:44.873 回答
0

下面的代码会将所有具有黑色类的元素的颜色设置为黑色。但是，您可以在 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
                       });
于 2013-03-25T11:19:28.500 回答
0 
    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;
    }
于 2013-03-25T11:19:37.547 回答