這是一個簡單的例子，先看demo：
http://cssplusplus.com/demo/js/1_5_mouse_move_change_style0.html
源碼如下：
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style>
05 #box {width:140px; height:140px; margin: auto; background-color:black;
06 color: white; font: 12px/1.5 Tahoma; padding: 20px}
07 </style>
08
09 <script>
10 window.onload = function() {
11 var oBox = document.getElementById("box");
12 oBox.onmouseover = function() {
13 oBox.style.cssText = "background-color: red; color: green";
14 };
15 oBox.onmouseout = function() {
16 oBox.style.cssText = "";
17 }
18 }
19 </script>
20 </head>
21 <body>
22 <p id="box">
23 鼠標移入改變樣式，鼠標移出恢復。
24 </p>
25 </body>
26 </html>
通過修改 oBox.style.cssText 來修改樣子。
（註：這裡的cssText相當於動態刷新內嵌在html文本上，具有最高優先級，當把 cssText 清空，不會影響 <style></style> 標簽或外置 css 文件所設置的樣式）
但在 javascript 裡使用 cssText 其實是違背樣式和行為分離原則的。
更好的辦法是用一個 hook ，即利用 javascript 為元素添加 class，而class的樣子在 css 文件裡設定好。
改進的源碼如下：
view source
print?
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style>
05 #box {width:140px; height:140px; margin: auto; background-color:black;
06 color: white; font: 12px/1.5 Tahoma; padding: 20px}
07 #box.hover {background-color: red; color: green}
08 </style>
09
10 <script>
11 window.onload = function() {
12 var oBox = document.getElementById("box");
13 oBox.onmouseover = function() {
14 oBox.className = "hover";
15 };
16 oBox.onmouseout = function() {
17 oBox.className = "";
18 };
19 };
20 </script>
21 </head> www.aiwalls.com
22 <body>
23 <p id="box">
24 鼠標移入改變樣式，鼠標移出恢復。
25 </p>
26 </body>
27 </html>
作者：黎宇浩