显然,用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); //新增样式,覆盖以前的
这么多方法啊。学习了