如何让再次添加的li得到样式的改变

我全部删除了再增加三个，样式不触发了。请问如何让添加的li触发onmouseover 和onmouseout

<!DOCTYPE html>

<html>

<head>

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>

<ul id="list">我是ul

</ul>

</div>

const list = document.getElementById('list');

const btnAdd = document.getElementById('btnAdd');

const btnRemove = document.getElementById('btnRemove');

btnAdd.onclick = function () {

const li = document.createElement('li');

li.textContent = '我是li' + (list.childElementCount + 1);

list.appendChild(li);

};

btnRemove.onclick = function () {

list.removeChild(list.lastElementChild);

};

const lis = document.getElementsByTagName('li');

console.log(lis);

for (let i = 0; i < 3; i++) {

;

lis[i].onmouseover = function () {

this.style.background = 'purple';

};

lis[i].onmouseout = function () {

this.style.background = 'green';

};

}

</script>

</body>

</html>

AXLL 2019-07-05

源自：JS DOM操作 11-2 编程练习

收起

2回答

卡布琦诺回答被采纳获得+3积分 2019-07-05 14:19:26

如果想要实现新增加的li设置样式的话，需要使用函数进行封装，如下：

<!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: #00c4ff7a;
        margin: 0 auto;
    }
    ul {
        width: 300px;
        height: 100%;
        background-color: #f9c3e6d6;
        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 box = document.getElementById('box');
    var ulList = document.getElementById('list');
    var btnAdd = document.getElementById('btnAdd');
    var btnRemove = document.getElementById('btnRemove');
    var i = 3;
	    changeBgc();
	    addLi();
	    removeLi();
	// 新增加的li添加鼠标样式
    ulList.onmouseover = function(){
    	changeBgc();
    }
    function changeBgc() {
        for (var z = 0; z < 3; z++) {
            ulList.children.item(z).onmouseover = function() {
                this.style.background = 'blue';
            }
            ulList.children.item(z).onmouseout = function() {
                this.style.background = 'red';
            }
        }
    }
    function addLi() {
        btnAdd.onclick = function() {
            var li = document.createElement('li');
            var txt = document.createTextNode('我是li' + (i + 1));
            li.appendChild(txt);
            ulList.appendChild(li);
            i++;
        }
    }
    function removeLi() {
        btnRemove.onclick = function() {
            if (ulList.children.length == 0) {
                return;
            }
            var lastChild = ulList.lastElementChild
            ulList.removeChild(lastChild);
            i--;
        }
    }
    </script>
</body>
</html>

希望可以帮到你！

收起回答

AXLL 提问者 #1

没看懂。。。。。。区别在哪呢

2019-07-05 14:45:00

卡布琦诺 2019-07-05 15:04:32

用函数形式写的话，分别调用绑定了事件的函数即可触发事件（比如changeBgc();addLi(); removeLi();），并且在调用了函数之后，再给li的父元素绑定一个鼠标经过事件，在这鼠标划过事件中调用changeBgc();函数，继续执行changeBgc();函数里面的for循环，这个时候，因为在之前先调用了addLi();函数，表示已经新创建了li元素。那么这个时候，再次调用changeBgc();函数，for循环就可以获取到新创建的li元素，从而为其添加效果

希望可以帮到你！

收起回答

提问者 AXLL #1

哦由于我是昨晚两点多写的，有点懵。我以为题意是删除添加后，只需要前三个能改变样式。修改如下： const list = document.getElementById('list'); const btnAdd = document.getElementById('btnAdd'); const btnRemove = document.getElementById('btnRemove'); btnAdd.onclick = function () { const li = document.createElement('li'); li.textContent = '我是li' + (list.childElementCount + 1); list.appendChild(li); }; btnRemove.onclick = function () { list.removeChild(list.lastElementChild); }; const lis = document.getElementsByTagName('li'); list.onmouseover = function () { for (var i = 0; i < 3; i++) { ; lis[i].onmouseover = function () { this.style.background = 'purple'; }; lis[i].onmouseout = function () { this.style.background = 'green'; }; } }

2019-07-05 15:18:53
卡布琦诺回复提问者 AXLL #2

这次实现的是正确的哦！

2019-07-05 15:31:55