这是一个简单的例子，先看demo：
源码如下：
#box {width:140px; height:140px; margin: auto; background-color:black;
color: white; font: 12px/1.5 Tahoma; padding: 20px}
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmouseover = function() {
oBox.style.cssText = "background-color: red; color: green";
};
oBox.onmouseout = function() {
oBox.style.cssText = "";
}
}
鼠标移入改变样式，鼠标移出恢复。
通过修改 oBox.style.cssText 来修改样子。
(注：这里的cssText相当于动态刷新内嵌在html文本上，具有最高优先级，当把 cssText 清空，不会影响 标签或外置 css 文件所设置的样式)
但在 javascript 里使用 cssText 其实是违背样式和行为分离原则的。
更好的办法是用一个 hook ，即利用 javascript 为元素添加 class，而class的样子在 css 文件里设定好。
改进的源码如下：
#box {width:140px; height:140px; margin: auto; background-color:black;
color: white; font: 12px/1.5 Tahoma; padding: 20px}
#box.hover {background-color: red; color: green}
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmouseover = function() {
oBox.className = "hover";
};
oBox.onmouseout = function() {
oBox.className = "";
};
};
鼠标移入改变样式，鼠标移出恢复。
作为一个好的web开发者，
一定要把结构、样式、行为分离谨记于心。
