使用JavaScript修改与给定CSS类关联的CSS属性

我有一个JavaScript颜色选择器链接到文本输入。我想在我的几个彩色元素上更改颜色输入更新的颜色。我可以创建几个类，每种颜色（蓝色，红色，绿色等），但我想有整个24位coloe调色板，不只是其中的一些。是否可以修改与给定CSS类关联的属性的值？如果是，那么修改这些值是否会在渲染页面上实时应用新值？在此先感谢:)使用JavaScript修改与给定CSS类关联的CSS属性

来源

2013-03-30 Virus721

是jQuery的一个选项，因为这会是最简单的方法吗？ –

是的，我使用jQuery，flemingstone的答案解决了我的问题。 – Virus721

好的。下一次，在标签中指定。 –

完全可能的，是的，它会实时更新。

这是一个函数来做类属性更新，绑定到一个mouseover事件（需要jQuery 1.0 +）。鼠标悬停在DIV id为myDiv将与类myColorDivs更新CSS背景颜色为白色的所有div的：

$('#myDiv').mouseover(function() { 

    $('.myColorDivs').css('background', '#fff'); 

});

来源

2013-03-30 14:10:32 flemingslone

请注意，修改类的CSS规则和直接使用类修改元素是有区别的。例如，如果添加了该类的新元素，则不会受到更改的影响。 – Pointy

完全正确。我只是在我的示例中修改页面中已存在的元素，而不是修改实际的类本身。 – flemingslone

谢谢你的回答！这不完全是我想要做的，但它会做到这一点。如果我需要添加一个元素，我仍然可以对其进行预编译或重新执行该样式更新，即使它在性能方面也不是很干净。 – Virus721

对不起，我来晚了...... 前几天有同样的问题，并没有发现一个实际的答案。下面是我如何解决它（需要jQuery）：

在所有其他样式表添加一个内联样式表后，您的页面可能需要与您想要更改的类。为此样式表分配一个TITLE属性！

<style title="tomrulez" type="text/css"> 
/*the stylesheet to change - Note the TITLE*/ 
.shaded{ 
    color:green; 
} 
</style>

添加此功能：

function modCSS (stylesheet, rule, attrib, newval){ 
    $.each(document.styleSheets, function(skey, svalue) { 
     if(svalue.title==stylesheet){ 
      $.each(svalue.cssRules,function (rkey,rvalue){ 
       if (rvalue.selectorText==rule){ 
        rvalue.style[attrib]=newval; 
       } 
      }); 
     } 
    }); 
    }

调用它像这样：

<div onclick="modCSS('tomrulez','.shaded','color','red')"> click here</div>

的参数是：

样式 - >的最后一个样式表的TITLE在你的
规则 - >你想改变的CSS规则
ATTRIB - >你想改变
的newval规则的属性 - 你要分配给>的新值那个属性

我已经用Firefox，Chrome和IE10测试过了。 IE可能无法在旧版本中使用。但我主要开发后端的一小部分用户，如果我告诉他们不使用IE浏览器（是的，我很幸运！）

Btw。这里是一个适合我的Plunker：http://plnkr.co/edit/EMDpjU06U2p83Df8Lolq?p=preview

来源

2013-09-26 14:05:38 mainguy

使用JavaScript修改与给定CSS类关联的CSS属性

回答

相关问题