程式碼範例如下:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>滑鼠的懸停及移出事件</title><style type="text/css">.one{color:red ;border:6px solid green ;cursor:hand;}</style> </head><script type="text/javascript"><!--/*如何通過JavaScript調用css:方式一:通過style對象方式二:通過className指定類別選取器*/function fun(){//拿到p標籤對象var p = document.getElementById("p") ;//定義p的樣式//p.style.color = "red" ; //第一種方式:通過style//p.style.border = "5px dashed green" ;p.style.backgroundColor = "red" ; //原本在css中,背景顏色的屬性為background-color, //但是由於是在JavaScript中去調用 //其不允許存在 “-” ,所以需要改寫為backgroundColorp.className = "one" ; //第二種方式:通過className指定類別選取器}function fun1(){//拿到p標籤對象var p = document.getElementById("p") ;p.className = "" ;}//--></script> <body> <p onmouseover = "fun()" onmouseout= "fun1()" id = "p">你好</p> </body></html>