<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="创建列表" />
<div ></div>
<script src="common.js"></script>
<script>
var arr = ["杨过", "小龙女", "郭靖", "张三丰", "黄飞鸿", "张无忌"];
my$("bt").onclick = function () {
var str = "<ul >";
//根据循环创建对应对数的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>