显然，用JS添加和修改DOM元素本身的css属性是很容易的。比如：

document.getElementById(’mydiv’).style.backgroundColor = ‘red’;

但是如果要修改所有 class=”classname1″ 的元素的样式怎么办呢？

使用JQuery的强大的选择器可以很容易的实现。比如：

$(’.classname1′).css(’background-color’,'red’);

但这也是遍历每个元素并修改之。在此之后添加的新的有相同class的元素还是没有变。需要再次遍历修改一次。

现在给出另外一个方法：

往document.body或者document.head里面增加一个style元素，覆盖掉以前的style。比如：

var style = document.createElement(’style’);
style.innerHTML = ‘.classname1 { background-color:red; }’;
document.getElementsByTagName(’head’)[0].appendChild(style);

这个在所有浏览器下面都有用。但是在IE里会有点小问题。如果覆盖的次数多了，新的样式就会失效。解决办法是在刚刚新建的那个style上加一个id值。下次新建的时候，先remove掉那个dom，再append。 JQuery代码如下:

$(’#new_style’).remove(); // 清除以前的样式 ( fix in IE )
$(’<style id=”new_style”>.classname1{ background-color:red;}</style>’).appendTo(document.body); //新增样式，覆盖以前的