php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式

这是一个简单的例子，先看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开发者，

一定要把结构、样式、行为分离谨记于心。