<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 400px; background-color: pink; } </style> </head> <body> <input type="button" value="创建列表" id="bt"/> <div id="dv"></div> <script src="common.js"></script> <script> var arr = ["杨过", "小龙女", "郭靖", "张三丰", "黄飞鸿", "张无忌"]; my$("bt").onclick = function () { var str = "<ul style='list-style: none; cursor: pointer;'>"; //根据循环创建对应对数的li for (var i = 0; i < arr.length; i++) { str += "<li>" + arr[i] + "</li>"; } str += "</ul>" my$("dv").innerHTML = str; //此时li标签已经创建 //获取所有的li标签为其添加鼠标进入事件跟鼠标离开事件 var list = my$("dv").getElementsByTagName("li"); for(var i = 0; i < list.length; i++) { //鼠标进入 list[i].onmouseover = function () { this.style.backgroundColor = "green"; }; //鼠标离开 list[i].onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script> </body> </html>
JavaScript点击按钮创建列表
猜你喜欢
转载自www.cnblogs.com/cuilichao/p/9382876.html
今日推荐
周排行