当前位置:编程学习 > JAVA >>

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

这是一个简单的例子,先看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 <div id="box">
23 鼠标移入改变样式,鼠标移出恢复。
24 </div>
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.zzzyk.com
22 <body>
23 <div id="box">
24 鼠标移入改变样式,鼠标移出恢复。
25 </div>
26 </body>
27 </html>

 作者:黎宇浩

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,