js控制 隔行換色
阿新 • • 發佈：2019-02-17
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 300px; } li{ line-height: 30px; list-style-type: none; } li span{ margin: 5px; } /* 建立li 的類*/ .bianliang{ background-color: #ccc !important; } </style> <script> window.onload = function(){ var listLi = document.getElementsByTagName("li"); for(var i=0;i<listLi.length;i++){ if(i%2 == 0){ listLi[i].style.backgroundColor = "#eee"; } //滑鼠經過的時候變亮 listLi[i].onmouseover = function() { this.className = "bianliang"; //指定該li的class="bianliang" } //滑鼠離開的時候變暗 listLi[i].onmouseout = function() { this.className = ""; } } } </script> </head> <body> <div id="box"> <ul> <li><span><span id="">你好，，，，，</span></span></li> <li><span><span id="">你好6666</span></span></li> <li><span><span id="">你好8888</span></span></li> <li><span><span id="">你好0000</span></span></li> <li><span><span id="">你好22222</span></span></li> <li><span><span id="">你好111111</span></span></li> </div> </body> </html>