如何用createElement解决这道题？
//下面这个代码怎么用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>
幻灭丶浏览 1700回答 1
1回答
-
qyy2499760117_叶子
<!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>
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery