<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#dv{
width: 300px;
height: 300px;
background-color: #ff0;
}
</style>
<body>
<input type="button" id="btn" value="创建列表">
<div id="dv"></div>
<script>
function byId(id){
return document.getElementById(id);
}
var names=["杨过","张三","李四","王五"]
var divobj=byId("dv");
var btn=byId("btn");
btn.onclick=function(){
var ulobj=document.createElement("ul");
divobj.appendChild(ulobj);
for(var i=0;i<names.length;i++){
//创建li标签
var liobj=document.createElement("li");
//添加li中的文本
liobj.innerText=names[i];
//将li放入ul标签中
ulobj.appendChild(liobj);
liobj.onmouseover=onmouseoverHaddle();
liobj.onmouseout=onmouseoutHaddle();
}
}
function onmouseoverHaddle(){
this.style.backgroundColor="red";
}
function onmouseoutHaddle(){
this.style.backgroundColor="#fff";
}
</script>
</body>
</html>
Stardust1001
相关分类