js删除css样式

1、如果使用class加的样式的话，可以使用document.getElementById("objid").className=""来清空样式；

2、如果是直接加的style="***"属性的话，可以使用document.getElementById("box").style.cssText = ""来清空样式。

1、直接更改，比如：

xID.style.display = "block" // 更改display属性，会覆盖css中的定义。

xID.style.display = ""      // 取消js更改display属性，以css样式为准。

这里的xID，是通过id获取的标签。当然，也可能是通过tagName之类的获取的标签。

这种方式，简单直接。但是要修改大量的样式的时候，不适合。所以，我更推荐第二种方式。

2、更改类名

xID.className = "xx   yy"

如果有多个类，就用空格隔开。前提，在样式中要有已有类的定义。比如这里的xx和yy类，在css中应该是写好的。

这种方式把所有的样式写在了css文件中，适合更改较多的样式以及炫酷的样式。js就只做一件事情：改类。至于这个类会把标签变成什么样子，交给css吧。

通过jquery也可以达到如上的效果：

$("#xID").css({

  fontSize:"12px",

  display:"block"

})  // 直接更改样式

$("#xID").addClass("xx")  // 增加删除类

$("#xID").removeClass("xx")

<script type="text/javascript">

window.onload = function() {

var abcs = document.getElementsByClassName("abc")

for(var i = 0i <abcs.lengthi++) {

abcs[i].style.width = "50%"

}

}

</script>

注意：上面的代码不支持 IE 6/7，因为 IE 6/7 不支持 getElementsByClassName。

下面的代码支持 IE 6/7，使用 getElementsByTagName 查找 div，再查找 abc

<script type="text/javascript">

window.onload = function() {

var divs = document.getElementsByTagName("div")

for(var i = 0i <divs.lengthi++) {

var classes = divs[i].className.split(" ")

for(var a = 0a <classes.lengtha++) {

if(classes[a] === "abc") {

divs[i].style.width = "50%"

break

}

}

}

}

</script>

---