原生javascript学习：鼠标移入移出改变样式

最新推荐文章于 2023-01-15 17:49:33 发布

weixin_33935777

最新推荐文章于 2023-01-15 17:49:33 发布

阅读量678

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/LiyuhaoDev/blog/62792

版权

2019独角兽企业重金招聘Python工程师标准>>>

这是一个简单的例子，先看demo：

http://cssplusplus.com/demo/js/1_5_mouse_move_change_style0.html

源码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#box {width:140px; height:140px; margin: auto; background-color:black;
			color: white; font: 12px/1.5 Tahoma; padding: 20px}
</style>

<script>
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 = "";
	}
}
</script>
</head>
<body>
<div id="box">
鼠标移入改变样式，鼠标移出恢复。
</div>
</body>
</html>

通过修改 oBox.style.cssText 来修改样子。

（注：这里的cssText相当于动态刷新内嵌在html文本上，具有最高优先级，当把 cssText 清空，不会影响 <style></style> 标签或外置 css 文件所设置的样式）

但在 javascript 里使用 cssText 其实是违背样式和行为分离原则的。

更好的办法是用一个 hook ，即利用 javascript 为元素添加 class，而class的样子在 css 文件里设定好。

改进的源码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#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}
</style>

<script>
window.onload = function() {
	var oBox = document.getElementById("box");
	oBox.onmouseover = function() {
		oBox.className = "hover";
	};
	oBox.onmouseout = function() {
		oBox.className = "";
	};
};
</script>
</head>
<body>
<div id="box">
鼠标移入改变样式，鼠标移出恢复。
</div>
</body>
</html>

作为一个好的web开发者，一定要把结构、样式、行为分离谨记于心。

转载于:https://my.oschina.net/LiyuhaoDev/blog/62792