//下面这个代码怎么用createElement做，除了JS部分其他部分不要有任何代码，全部有JS创建 CSS用element.cssText代替
<style> //CSS部分
li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; }
div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; }
</style>
<script>// js部分
window.onload = function (){
var aLi = document.getElementsByTagName('li');
var that = null;
for( var i=0; i<aLi.length; i++ ){
aLi[i].onmouseover = function (){
that = this;
fn1();
};
aLi[i].onmouseout = function (){
this.getElementsByTagName('div')[0].style.display = 'none';
};
}
function fn1(){
that.getElementsByTagName('div')[0].style.display = 'block';
}
</script>
<ul> //html部分
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
1 回答
qyy2499760117_叶子
TA贡献188条经验 获得超91个赞
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="js/dist/avalon.js"></script>
<style> /*CSS部分*/
li {
width: 100px;
height: 150px;
float: left;
margin-right: 30px;
background: #f1f1f1;
position: relative;
z-index: 1;
}
div {
width: 80px;
height: 200px;
background: red;
position: absolute;
top: 75px;
left: 10px;
display: none;
}
</style>
<script>// js部分
window.onload = function () {
var body = document.getElementById('bodyDiv');
//动态创建标签
//第一个
var ul=document.createElement('ul');
var li=document.createElement('li');
var div=document.createElement('div');
body.appendChild(ul);
ul.appendChild(li)
li.appendChild(div);
//第二个
var li2=document.createElement('li');
var div2=document.createElement('div');
ul.appendChild(li2)
li2.appendChild(div2);
//第三个
var li3=document.createElement('li');
var div3=document.createElement('div');
ul.appendChild(li3)
li3.appendChild(div3);
var aLi = document.getElementsByTagName('li');
var that = null;
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
that = this;
fn1();
};
aLi[i].onmouseout = function () {
this.getElementsByTagName('div')[0].style.display = 'none';
};
}
function fn1() {
that.getElementsByTagName('div')[0].style.display = 'block';
}
}
</script>
</head>
<body id="bodyDiv">
<!--<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>-->
</body>
</html>
添加回答
举报
0/150
提交
取消