<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{ margin: 0 auto; margin-bottom: 4px; height: 5em; list-style: none; width: 60%; } </style> </head> <body> <script> window.onload = function(){ var oUl = document.getElementById("ul1"); var ali = oUl.getElementsByTagName("li"); arr = ['red','blue','yellow']; for(var i = 0;i< ali.length; i++ ){ ali[i].style.background = arr[i%arr.length]; ali[i].index = i; ali[i].onmouseover = function(){ this.style.background = 'gray'; } ali[i].onmouseout = function(){ this.style.background = arr[this.index%arr.length]; } } } </script> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li><li></li> <li></li> <li></li></ul></body></html>
三种颜色铺满十个li
最新推荐文章于 2023-02-09 17:53:07 发布