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

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

Answer 1

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

这是一个执行类属性更新的函数，绑定到mouseover事件（需要jQuery 1.0+）。 使用id myDiv鼠标hover在div上将使用类myColorDivs将所有div的CSS背景颜色更新为白色：

$('#myDiv').mouseover(function() { $('.myColorDivs').css('background', '#fff'); }); 

Answer 2

对不起，我迟到了……前几天有同样的问题，没有找到实际的答案。 这是我为我解决的问题（需要jquery）：

在您要更改的类所需的所有其他样式表之后添加内联样式表。 为此样式表分配TITLE属性！

添加此function：

  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; } }); } }); } 

这样叫：

 
 click here 

参数是：

• stylesheet – >页面上最后一个样式表的TITLE
• rule – >要更改的CSS规则
• attrib – >您想要更改的规则的属性
• newval – >要分配给该属性的新值

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

顺便说一句。 这是一个适合我的Plunker： http ：//plnkr.co/edit/EMDpjU06U2p83Df8Lolq？p = preview