javascript修改html元素的class執行個體

代碼如下	複製代碼
<script type="text/javascript">  function over(){   var para = document.getElementById("testPara").className = "testOver";  }  function out(){   var para = document.getElementById("testPara").className = "testNormal";  }  </script>

HTML代碼

本例只需要一個段落，並且給它設定了預設的class屬性“testNormal”，而滑鼠划過和划出會分別觸發上面的兩個JavaScript函數，從而改變該段落自身的class屬性。

代碼如下	複製代碼
<p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()">     我是樣本段落，滑鼠滑過我，就可以改變我的class屬性，從而改變應用的CSS規則。    </p>

CSS

CSS代碼設定了兩個測試用的樣式。

代碼如下	複製代碼
.testNormal {  border:1px solid black;  } .testOver {  background:#999999;  border:1px solid black;  font-weight:bold;  padding:3em;  }