JavaScript modifies the class instance of an HTML element

The code is as follows	Copy Code
<script type= "Text/javascript" > function over () { var para = document.getElementById ("Testpara"). ClassName = "Testover"; } function out () { var para = document.getElementById ("Testpara"). ClassName = "Testnormal"; } </script>

HTML code

This example takes only one paragraph and sets the default class attribute "Testnormal" to it, and the mouse across and out will trigger the two JavaScript functions above, changing the class attribute of the paragraph itself.

The code is as follows	Copy Code
<p id= "Testpara" class= "Testnormal" onmouseover= "Over ()" onmouseout= "Out ()" > I am a sample paragraph, the mouse over me, you can change my class attributes, and thus change the application of CSS rules. </p>

Css

The CSS code sets two test styles.

code is as follows	copy code
. testnormal {  border:1px solid black;  } . testover {  background: #999999;  border:1px solid black;  font-weight:bold;  padding:3em;  }