老师好,帮忙看下哪里错了
来源:11-2 编程练习
Perfect雪儿
2019-07-25 19:13:43
<!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">
//获取2个按钮以及ul
var s=document.getElementById('btnAdd');
var o=document.getElementById('btnRemove');
var list=document.getElementById('list');
var lis=document.getElementsByTagName('li');
//当鼠标在li元素上滑过时,li的状态改变
for(var i=0;i<=lis.length;i++){
if(i==0 || i==1 || i==2){
lis[i].onmousemove=function(){
this.style.backgroundColor="blue";
}
}
}
//点击添加元素按钮,点击一下新建一个
s.onclick=function(){
var x=lis.length; //动态变化的
var txt=document.createTextNode('我是li'+(x+1));
var li=document.createElement('li');
li.appendChild(txt);
list.appendChild(li);
}
//点击删除元素,从最后一个开始删除li元素,点击一下删一个
o.onclick=function(){
list.removeChild(list.lastElementChild);
}
</script>
</body>
</html>
老师,当删除掉123在添加的时候,鼠标移入的时候背景色就没有了,这个怎么改呢
3回答
你好同学,跟着老师的思路加一个判断就行哦。参考如下:
另外呢,同学的理解能力还是有一点小欠缺。当然了,我们每一个人都会有自己的不足。因为在实际工作中,不单单需要技术好。同时也要具备比较好的理解能力,语言表达能力等。否则的话,在与同事协作开发的时候,沟通不好工作也很难开展。所以建议同学也在平时的生活中,多注意提升自己的理解能力,让自己变得更加优秀,加油哦!
祝学习愉快,望采纳。
好帮手慕夭夭
2019-07-26
你好同学,可以在添加元素按钮的事件中进行if判断,获取当前li的长度,当长度小于等于3的时候再添加事件。不过同学的这个想法不符合实际的开发逻辑,按照老师的修改建议去做哦。
祝学习愉快,望采纳。
好帮手慕夭夭
2019-07-26
你好同学,问题与修改参考如下代码和注释:
祝学习愉快,望采纳。
相似问题