js滑鼠移入移出事件樣例
阿新 • • 發佈：2019-02-15
<html> <head> <title>javaScript例項</title> <style> li{background-color:#eee;height:25px;margin-top:2px;} </style> <script type="text/javascript"> //新增滑鼠移入移出事件 function fun(){ //獲取所有li節點 var list = document.getElementById("uid").getElementsByTagName("li"); //遍歷所有li節點 for(var i=0;i<list.length;i++){ //新增滑鼠移入事件 list[i].onmouseover=function(){ this.style.backgroundColor="#ffcc00"; this.style.fontSize="20px"; } //新增滑鼠移出事件 list[i].onmouseout=function(){ this.style.backgroundColor="#eeeeee"; this.style.fontSize="16px"; } } } </script> </head> <body onload="fun()"> <h2>JavaScript例項--JS中事件</h2> <ul id="uid"> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> <li>aaaaaaaaaaaaaaa</li> </ul> <table height="360" width="480"> </table> </body> </html>