使用Javascript选择一个元素[重复]答案

【问题标题】：Select an element with Javascript [duplicate]使用Javascript选择一个元素[重复]
【发布时间】：2023-04-09 20:17:01
【问题描述】：

嘿 Stackoverflow 开发人员，我有这段代码

    <div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div><br>  
        <div id="6"></div><div id="7"></div><div id="8"></div><div id="9"></div><div id="10"></div><br>
        <div id="11"></div><div id="12"></div><div id="13"></div><div id="14"></div><div id="15"></div><br>
        <div id="16"></div><div id="17"></div><div id="18"></div><div id="19"></div><div id="20"></div><br>
        <div id="21"></div><div id="22"></div><div id="23"></div><div id="24"></div><div id="25"></div><br>        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
        <script src="../sketch.js"></script>
        <script>
document.getElementsByTagName("div")[0].addEventListener("click", displayDate);

function displayDate() {
    this.style.backgroundColor = 'red';
}
</script>

我希望能够点击一个 div 并让 Javascript（不是 jQuery）更改 only 点击的 div 的背景颜色。我什么都试过了。我该怎么做？

【问题讨论】：

与其为每个 div 添加监听器，不如考虑为父级添加监听器并使用event.target 来发现被点击的元素。

标签： javascript html css

【解决方案1】：

您可以使用.querySelectorAll() 选择所有带有id 的div 元素，迭代NodeList 的div 元素，在循环中附加click 处理程序

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div><br>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div><br>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div><br>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<div id="20"></div><br>
<div id="21"></div>
<div id="22"></div>
<div id="23"></div>
<div id="24"></div>
<div id="25"></div><br>

<script>
  let divs = document.querySelectorAll("div[id]");
  for (let div of divs) {
    div.textContent = div.id;
    div.addEventListener("click", displayDate);
  }

  function displayDate() {
    this.style.backgroundColor = 'red';
  }
</script>

【讨论】：

所有答案都很棒！谢谢社区！但是这个可以在不明确提及的情况下引用一个 div，这就是我试图解决的问题。谢谢！

【解决方案2】：

当没有值/文本时，div 会被忽略。你的代码很好。只需在 div 中添加一些内容即可。

    <div id="1">some value</div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div><br>  
        <div id="6"></div><div id="7"></div><div id="8"></div><div id="9"></div><div id="10"></div><br>
        <div id="11"></div><div id="12"></div><div id="13"></div><div id="14"></div><div id="15"></div><br>
        <div id="16"></div><div id="17"></div><div id="18"></div><div id="19"></div><div id="20"></div><br>
        <div id="21"></div><div id="22"></div><div id="23"></div><div id="24"></div><div id="25"></div><br>        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
        <script src="../sketch.js"></script>
        <script>
document.getElementsByTagName("div")[0].addEventListener("click", displayDate);

function displayDate() {
    this.style.backgroundColor = 'red';
}
</script>

【讨论】：

【解决方案3】：

我认为您的 div 不可见，因为它没有内容并且没有高度或宽度。我用css添加了高度和宽度，然后它工作了。您还可以按照上面的建议添加内容。

document.getElementsByClassName( 'test' )[0].addEventListener( 'click', function( event ){
	this.style.backgroundColor = 'red';
});

.test {
  width: 300px;
  height: 300px;
  background-color: blue;
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：