js删除html元素的class属性（div、ul、li、ol、img、table等）

使网页变得美观漂亮就要用CSS样式修饰，而作用到具体的html元素上得用class属性。应用多种多样，有时需要给html元素加上class属性，有时又需要把class属性删除。其实不修饰html元素不一定要把class属性删除，可以把它设为空，元素的样式同样不在。

在 javascript 中，删除html元素的class属性其实是移除属性，用 removeAttribute() 方法，不光移除class属性用这个方法，移除html元素的所有属性都用这个方法。

一、js删除class之div

假如有 div 元素如下：

<div id="divId" class="content">用javascript删除div的class属性</div>

用于div的CSS样式为：

.content{width:980px;margin:auto;}

//删除div的class属性
  var obj = document.getElementById("divId");
  obj.removeAttribute("class");//删除div的class属性
  obj.class = "";//设置div的class属性为空
  obj.setAttribute("class", "");//设置div的class属性为空（方法二）

二、js删除class之ul li、ol li

1、假如有 ul li 如下：

<ul id="ulId" class="list"><li>javascript删除ul li 的class属性</li></ul>

var ul = document.getElementById("ulId");
  ul.removeAttribute("class");//删除ul的class属性
  ul.class = "";//设置ul的class属性为空
  ul.setAttribute("class", "");//设置ul的class属性为空（方法二）

//删除li的class属性
  var li= ul.childNodes;//li是ul的孩子，可通过 childNodes 获得li
  for (var i = 0; i < li.length; i++) {
     li[i].removeAttribute("class");//循环删除所有li的class属性
  }

如果li有Id，也可以通过Id获取li。如果要删除ul的第一个孩子，也可以通过 firstChild 获取；同理要删除ul的最后一个孩子可通过 lastChild 获取；删除中间的孩子在li没有Id的情况下，只能用循环。

2、假如有 ol li 如下：

<ol id="ol" class="ollist"><li>javascript删除ol li的class属性</li></ol>

//删除ol的class属性
  var ol = document.getElementById("ol");
  ol.removeAttribute("class");//删除ol的class属性

//删除ol li的class属性
  var ol = document.getElementById("ol");
  var li = ol.firstChild;//li是ol的第一个孩子，可通过ol获取li
  li.removeAttribute("class");//删除li的class属性

三、js删除class之img

假如有 img 如下：

<img id="imgId" src="/images/test.jpg" class="imgstyle" alt="javascript删除img的class属性" />

var obj = document.getElementById("imgId");
  obj.removeAttribute("class");

四、js删除class之table

假如有 tabel 如下：

<table id="tableId" cellpadding="0" cellspacing="0" class="content">
    <tr><td>javascript删除table的class属性</td><td>有两种方法</td></tr>
  </table>

var obj = document.getElementById("tableId");
  obj.removeAttribute("class");