<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 300px; height: 400px; background-color: green; } </style> </head> <body> <input type="button" value="创建列表" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script type="text/javascript"> var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"]; my$("btn").onclick = function() { var str = "<ul style='list-style-type:none;cursor:pointer' >"; for (var i = 0; i < names.length; i++) { str += "<li>" + names[i] + "</li>"; } str += "</ul>"; my$("dv").innerHTML = str; //代码执行到这里,li已经有了 //获取所有的li var list = my$("dv").getElementsByTagName("li"); for (var j = 0; j < list.length; j++) { //鼠标进入事件 list[j].onmouseover = function() { this.style.backgroundColor = "red"; }; //鼠标离开事件 list[j].onmouseout = function() { this.style.backgroundColor = ""; }; } }; </script> </body> </html>
