用Javascript控制CSS类样式

2009年10月27日 由 Longbill 留言 »

显然,用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); //新增样式,覆盖以前的

广告位

1条评论

  1. 这么多方法啊。学习了

留下评论