亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 querySelectorAll 選擇所有 DIV?

如何使用 querySelectorAll 選擇所有 DIV?

慕工程0101907 2023-10-20 10:26:16
我想調用 all divs 因為TUTTIiDIV它已經是一個數組。當我運行此代碼時,控制臺看起來不錯,但代碼無法按預期工作。如何選擇數組的所有元素TUTTIiDIV?document.addEventListener("DOMContentLoaded", function() {  var TUTTIiDIV = document.querySelectorAll("div");  document TUTTIiDIV.onclick = function() {    coloraicontorni()  }}); //END DOMcontentLoadedfunction coloraicontorni() {  var TUTTIiDIV = document.querySelectorAll("div");  for (i = 0; i <= TUTTIiDIV.length; i++) {    TUTTIiDIV[i].classList.add('contorno');  }};* {  box-sizing: border-box;}body {  background-color: antiquewhite;}#rosso {  width: 25%;  height: 150px;  background-color: red;  display: inline-block;}#blu {  width: 25%;  height: 150px;  background-color: blue;  display: inline-block;}#giallo {  width: 25%;  height: 150px;  background-color: yellow;  display: inline-block;}.contorno {  border: 8px solid black;}<div id="rosso"></div><div id="blu"></div><div id="giallo"></div>
查看完整描述

1 回答

?
慕尼黑8549860

TA貢獻1818條經驗 獲得超11個贊

使用最近容器中的委托來選擇單擊該容器中的任何內容


window.addEventListener("load", function() { // when the page has loaded

  document.getElementById("container").addEventListener("click", function(e) {

    [...this.querySelectorAll("div")] // the "this" is the container

    .forEach(div => div.classList.add('contorno'));

  });

});

* {

  box-sizing: border-box;

}


body {

  background-color: antiquewhite;

}


#rosso {

  width: 25%;

  height: 150px;

  background-color: red;

  display: inline-block;

}


#blu {

  width: 25%;

  height: 150px;

  background-color: blue;

  display: inline-block;

}


#giallo {

  width: 25%;

  height: 150px;

  background-color: yellow;

  display: inline-block;

}


.contorno {

  border: 8px solid black;

}

<div id="container">

  <div id="rosso"></div>

  <div id="blu"></div>

  <div id="giallo"></div>

</div>

如果您只想單擊 div,請執行以下操作


window.addEventListener("load", function() { // when the page has loaded

  document.getElementById("container").addEventListener("click", function(e) {

    if (e.target.tagName === "DIV") { // only if we click a div in the container

      [...this.querySelectorAll("div")] // the "this" is the container

      .forEach(div => div.classList.add('contorno'));

    }

  });

});

* {

  box-sizing: border-box;

}


body {

  background-color: antiquewhite;

}


#rosso {

  width: 25%;

  height: 150px;

  background-color: red;

  display: inline-block;

}


#blu {

  width: 25%;

  height: 150px;

  background-color: blue;

  display: inline-block;

}


#giallo {

  width: 25%;

  height: 150px;

  background-color: yellow;

  display: inline-block;

}


.contorno {

  border: 8px solid black;

}

<div id="container">

  <div id="rosso"></div>

  <div id="blu"></div>

  <div id="giallo"></div>

</div>


查看完整回答
反對 回復 2023-10-20
  • 1 回答
  • 0 關注
  • 118 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號