DOM&BOM中，换肤案例代码第一段为什么不能写为this，第二段为什么不能写为lis[i]？

第一段：

<script>
        // 1.获取导航栏div对象
        var nav=document.querySelector('#header');

        // 2.获取所有所有的li标签
        var lis=document.querySelectorAll('li');

        // 3.循环为每个li上绑定点击事件
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){                                        //这里为什么不能写this?
                // 获取当前li的背景色，在设置给nav导航栏
                var bgc=this.style.backgroundColor;
                nav.style.backgroundColor=bgc;
            }
        }
    </script>

第二段：

<script>
        // 1.获取导航栏div对象
        var nav=document.querySelector('#header');

        // 2.获取所有所有的li标签
        var lis=document.querySelectorAll('li');

        // 3.循环为每个li上绑定点击事件
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                // 获取当前li的背景色，在设置给nav导航栏
                var bgc=this.style.backgroundColor;                 //这里为什么不能写lis[i]？
                nav.style.backgroundColor=bgc;
            }
        }
    </script>

童真模式启动 2021-10-30

源自：DOM&BOM 4-2 换肤案例

收起

1回答

好帮手慕阿园回答被采纳获得+3积分 2021-10-30 16:42:28

同学你好

1、this指的是当前对象，而此处的当前对象指的是当前的全局对象 Window，所以此处不能使用this

2、该处是可以写成lis[i]的，这里的this指的就是lis[i]，所以是可以写成lis[i]的，同学可以自己试下哦

祝学习愉快~

收起回答

童真模式启动提问者 #1

2、我把this改为lis[i]导航栏没变色

2021-10-31 15:47:10
好帮手慕阿园回复提问者童真模式启动 #2

同学你好，是可以的哦，如下
可能是由于浏览器缓存原因导致的，同学清除下缓存试试
祝学习愉快~

2021-10-31 16:31:26
童真模式启动提问者回复好帮手慕阿园 #3

这是代码，感觉和上面一样啊，也清楚了缓存，怎么就没用呢？
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
……
    </style>
</head>
<body>
    <div id="topbar" class="title">
        <div class="w">
            前端开发博客
            <ul>
                <li style="background-color: #DD5044;"></li>
                <li style="background-color: #1CA261;"></li>
                <li style="background-color: #458FD2;"></li>
                <li style="background-color: #333;"></li>
            </ul>
        </div>
        <div id="header" class="blue">
            <div class="w nav">
                <a href="#">首页</a>
                <a href="#">Web前端</a>
                <a href="#">Java开发</a>
                <a href="#">人工智能</a>
                <a href="#">UI设计</a>
            </div>
        </div>
    </div>

    <script>
        // 1.获取导航栏div对象
        var nav=document.querySelector('#header');

        // 2.获取所有所有的li标签
        var lis=document.querySelectorAll('li');

        // 3.循环为每个li上绑定点击事件
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                // 获取当前li的背景色，在设置给nav导航栏
                nav.style.backgroundColor=lis[i].style.backgroundColor;
            }
        }
    </script>
</body>
</html>

2021-11-01 15:07:49