如何按类名正确定位？
我正在尝试在 JS 上练习一些东西，我想在点击时切换多个 div 以更改它们的颜色，但我似乎无法正确定位第一个。当我按标签名称执行此操作时很好，但按类它似乎不起作用。我究竟做错了什么？谢谢！
编辑。这是您更正后我的代码的样子。
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>
let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}
互换的青春浏览 108回答 4
4回答
-
智慧大石
我要补充一点，如果选择器仅由一个元素使用，最好分配一个 id 并使用 getElementById。let boxOne = document.getElementById("one");let allBoxes = document.getElementsByClassName("square");boxOne.onclick = function() { alert("Clicked via ID");}const arr = [1, 2, 3];arr.forEach(i => { allBoxes[i].onclick = function() { alert("Clicked via Class"); }}).square { width: 100px; height: 100px; background: blue; margin: 20px; font-size: 50px; color: white; text-align: center; display: flex; flex-direction: column; justify-content: center; cursor: pointer;}<body> <div class="container"> <div class="square" id="one"> 1 </div> <div class="square" id="two"> 2 </div> <div class="square" id="three"> 3 </div> <div class="square" id="four"> 4 </div> </div></body> -
PIPIONE
文档。getElementsByClassName 返回具有该类名的元素数组（不带点）querySelector 用于 css 选择器（例如“.one”、“div.one”）querySelectorAll 像 2. 但返回数组 -
料青山看我应如是
let boxOne = document.getElementsByClassName("one")[0]boxOne.onclick = function() { alert("Clicked!")}div { width: 100px; height: 100px; margin: 30px; background: blue}<body> <div class="container"> <div class="one"> </div> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div> </div> <script src="script.js"></script></body> -
扬帆大鱼
使用此行：document.getElementsByClassName(".one")[0] 您已经针对 div，因此将其更改 boxOne[0].onclick = 为： boxOne.onclick =
随时随地看视频慕课网APP
相关分类
JavaScript