css 如何在JavaScript中选择HTML集合中的特定元素

kjthegm6 于 2023-01-14 发布在 Java

关注(0)|答案(4)|浏览(118)

我有一个div容器，里面有一定数量的div，用for循环创建。当我点击其中一个div时，我需要让它改变颜色。我的问题是不知道如何用addEventListener选择一个特定的元素来改变颜色。

<body>
    <div id="main-container"></div>
    <script src="script.js"></script>
</body>

const mainContainer = document.getElementById("main-container");
for (let i = 0; i <= 11; ++i) {
    const gridChildrens = document.createElement("div");
    gridChildrens.setAttribute("class", `gridChildrens`);
    const grids = document.querySelector('.gridChildrens')
    mainContainer.appendChild(gridChildrens);
}

目前，我知道如何使用click侦听器更改第一个或最后一个元素的颜色，但不知道如何更改其余的div。
目前，我知道如何使用click侦听器更改第一个或最后一个元素的颜色，但不知道如何更改其余的div，我希望单击任何div并更改颜色。

css

来源：https://stackoverflow.com/questions/75106259/how-can-i-select-a-specific-element-in-a-htmlcollection-in-javascript

4条答案

按热度按时间

jm2pwxwz1#

尝试为循环中创建的每个div添加一个事件监听器，然后使用**'this'**设置颜色。

const mainContainer = document.getElementById("main-container");
        for (let i = 0; i <= 11; ++i) {
            const gridChildrens = document.createElement("div");
            gridChildrens.setAttribute("class", `gridChildrens`);
            gridChildrens.addEventListener('click', function() {
                this.style.backgroundColor = 'red';
            });
            mainContainer.appendChild(gridChildrens);
        }

代码片段示例：

<html>
<head>
    <style>
        .gridChildrens {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="main-container"></div>

    <script>
        const mainContainer = document.getElementById("main-container");
        for (let i = 0; i <= 11; ++i) {
            const gridChildrens = document.createElement("div");
            gridChildrens.setAttribute("class", `gridChildrens`);
            gridChildrens.addEventListener('click', function() {
                this.style.backgroundColor = 'red';
            });
            mainContainer.appendChild(gridChildrens);
        }
    </script>
</body>
</html>

赞(0）回复(0）举报 2023-01-14

u5rb5r592#

要显式地将querySelector元素作为目标而不使用click事件（该事件将检查www.example.com），您可以使用nth-child或nth-of-type样式的css选择器，如下所示。event.target ) you can use the nth-child or nth-of-type style css selector as below.
要根据用户单击来标识元素，event本身将公开target属性，该属性将是导致事件处理程序激发的元素。以下代码使用绑定到文档本身的delegated event listener，该文档在需要时处理所有单击事件，但此处仅响应绑定到gridChildrens元素的事件

const mainContainer = document.getElementById("main-container");
for (let i = 0; i <= 11; ++i) {
    const div = document.createElement("div");
    div.setAttribute("class", `gridChildrens`);
    div.textContent=i;
    

    mainContainer.appendChild( div );
}

document.querySelector('.gridChildrens:nth-of-type(4)').classList.add('banana')
document.querySelector('.gridChildrens:nth-of-type(7)').classList.add('banana')
document.querySelector('.gridChildrens:nth-of-type(10)').classList.add('banana')

document.addEventListener('click',e=>{
  if( e.target instanceof HTMLDivElement && e.target.classList.contains('gridChildrens') ){
    e.target.classList.toggle('tomato')
  }
})

.gridChildrens{
  width:50%;
  height:1rem;
  margin:0.25rem;
}

.banana{
  background:yellow
}
.tomato{
  background:tomato
}

<div id="main-container"></div>

赞(0）回复(0）举报 2023-01-14

moiiocjp3#

这会让你对如何使用addEventlistner有一个很好的了解。基本上，你可以在任何时候通过event对象来创建某个事件。它包含了你所寻找的特定div的所有信息，你可以用它来修改任何东西。但是记住先用addEventlistner绑定元素。

var containers= document.getElementsByClassName("container");
const changeColor = (e)=>{

  if(e.target.style.background =="orange"){
    e.target.style.background ="red"
  }
  else
  e.target.style.background ="orange";
}

for(var i=0; i< containers.length; i++){
  containers[i].addEventListener('click',function(e){
    changeColor(e)
  } );
}

.container{
  height:50px;
  width:100px;
  background: #000;
  margin :10px 10px;
  border-radius:10px;
  cursor:pointer;
}
.holder{
  display:flex;
  flex-wrap:wrap;
  
}

<div class="holder">
      <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>

    
  </div>

赞(0）回复(0）举报 2023-01-14

0yg35tkg4#

有几种方法可以做到这一点，例如，你可以在循环中给你的div添加相同的类，然后你可以通过document.querySelectorAll('.class-name')访问它们，所以smth是这样的：

[...document.querySelectorAll('.class-name')].forEach( el => {
  el.addEventListener('click', (e) => { changeColor(e); });
});

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何在JavaScript中选择HTML集合中的特定元素

4条答案

相关问题

热门标签

最新问答