时间戳

首页 > 解决方案 > 如何使用 JS 在 HTMl 中选择元素，为什么在这种情况下函数不起作用？

javascript - 如何使用 JS 在 HTMl 中选择元素，为什么在这种情况下函数不起作用？

问题描述

嗨，我正在做一个香草 JS 练习，我遇到了一些我不知道为什么的功能的问题。编辑一直说“无法读取未定义的属性”，但我使用了正确的选择器和方法，所以我不明白出了什么问题。这是代码

js：

function opena(){
  var eleme= document.getElementsByClassName(".left")[0]
  var elemo = document.getElementsByClassName(".right")[0]

    eleme.classList.add("applejuice");

   elemo.classList.add("pearjuice")
}

HTML：

<body>
  <button onClick="opena()">press</button>
  <div class="pack">
    <div class="left" >A</div>
    <div class ="right">B</div>
  </div>
</body>

标签： javascript

解决方案

由于您使用的是document.getElementsByClassName()，因此您不需要.在每个类名之前加上.leftor .right。你可以直接使用如下：

document.getElementsByClassName("left")
document.getElementsByClassName("right")


function opena() {
  var eleme = document.getElementsByClassName("left")[0]
  var elemo = document.getElementsByClassName("right")[0]

  eleme.classList.add("applejuice");
  elemo.classList.add("pearjuice")
}
.applejuice { color: red; }
.pearjuice { color: orange; }
<body>
  <button onClick="opena()">press</button>
  <div class="pack">
    <div class="left">A</div>
    <div class="right">B</div>
  </div>
</body>

附带说明一下，.如果您使用document.querySelector()或document.querySelectorAll()喜欢，则在需要类名之前：

function opena() {
  var eleme = document.querySelectorAll(".left")[0]
  var elemo = document.querySelectorAll(".right")[0]

  eleme.classList.add("applejuice");
  elemo.classList.add("pearjuice")
}
.applejuice { color: red; }
.pearjuice { color: orange; }
<body>
  <button onClick="opena()">press</button>
  <div class="pack">
    <div class="left">A</div>
    <div class="right">B</div>
  </div>
</body>

推荐阅读