为什么我下面这个this.style.backgroundcolor = 'red'; 和 this.style.width = '300px';没有效果啊




   <script>
        var div = document.querySelector('div')
        div.onclick = function() {
            this.style.backgroundColor = 'pink';
            this.style.width = '300px';
        }
    </script>

我想要下面这一段也有上面的效果，点击的时候改变背景色，为什么它不变呀？

   <div class="nav"></div>
    <script>
        var nav = document.getElementsByClassName("nav")
        nav.onclick = function() {
            this.style.backgroundcolor = 'red';
            this.style.width = '300px';
        }
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/97994028905611.png "#left")

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/05541128905612.png "#left")

var nav = document.getElementsByClassName("nav")获取到的是一个列表，你给列表添加点击事件肯定是不可行的，你试试
nav[0].onclick = function() {
this.style.backgroundcolor = 'red';
this.style.width = '300px';
}

1、document.getElementsByClassName("nav")-->document.getElementsByClassName("nav")[0]
2、backgroundcolor-->backgroundColor


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style></style>
  </head>
  <body>
    <div class="nav">ssss</div>
    <script>
      var nav = document.getElementsByClassName("nav")[0];
      console.log("nav", nav);
      nav.onclick = function () {
        this.style.backgroundColor = "red";
        this.style.width = "300px";
      };
    </script>
  </body>
</html>

getElementsByClassName获取的是一个数组，你要是想添加对象就循环这个数组给每个循环项添加onckick就可以了，楼主要努力哦基础功都不行

这种循环的用事件委托比较好