请老师看看,可以改进优化吗?
来源:7-2 编程练习
光aaaaand影
2019-08-31 14:58:22
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html, body { margin: 0; padding: 0; } div:not(:nth-of-type(2)) { width: 500px; height: 100%; background-color: #a0e4ff; margin: 0 auto; } /*ul默认有外边距*/ ul { width: 300px; height: 100%; background-color: #ecc7ea; list-style: none; /*清除默认边距*/ margin: 0; padding: 0; margin: 20px auto; margin-bottom: 30px; } li { width: 200px; height: 30px; line-height: 30px; margin: 30px auto; background-color: #cdffc0; } </style> </head> <body> <div id="box"> <button id="btnAdd">添加元素</button> <button id="btnRemove">删除元素</button> <ul id="list">我是ul <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> </ul> </div> <script type="text/javascript"> //此处填写代码 var btnAdd=document.getElementById('btnAdd'), btnRemove=document.getElementById('btnRemove'), lis=document.querySelectorAll('li'); for(var i=0;i<lis.length;i++){ // (function(){ lis[i].onmouseover=function(){ this.style.backgroundColor="blue"; }; lis[i].onmouseout=function(){ this.style.backgroundColor="hotpink"; } // })(i) } var liAll=document.getElementsByTagName('li'); var list=document.getElementById('list'); btnAdd.onclick=function(){ var li=document.createElement('li'); li.appendChild(document.createTextNode('我是li'+ ++liAll.length)); list.appendChild(li); console.log(list); }; btnRemove.onclick=function(){ list.removeChild(list.lastElementChild); } </script> </body> </html>
1回答
你好同学,代码实现的不错,另外,有一个小小的建议,如下自加的公式,给它包裹一个括号更清晰哦。
祝学习愉快,望采纳。
相似问题