JavaScript DOM操作案例div的高亮显示
Posted 吃蛋糕的猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM操作案例div的高亮显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background-color: green; float: left; margin-left: 10px; border: 5px solid green; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <script> //获取所有的div标签 var divObjs = document.getElementsByTagName("div"); for (var i = 0; i < divObjs.length; i++) { //为每个div添加鼠标进入的事件 divObjs[i].onmouseover = function () { this.style.border = "5px solid red"; }; //为每个div添加鼠标离开的事件 divObjs[i].onmouseout = function () { this.style.border = ""; }; } </script> </body> </html>
以上是关于JavaScript DOM操作案例div的高亮显示的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript DOM操作案例点击按钮修改div的属性
JavaScript DOM操作案例点击按钮显示隐藏div优化后