第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何按類名正確定位？

如何按類名正確定位？

互換的青春 2022-10-27 16:10:10
我正在嘗試在 JS 上練習(xí)一些東西，我想在點(diǎn)擊時(shí)切換多個(gè) div 以更改它們的顏色，但我似乎無法正確定位第一個(gè)。當(dāng)我按標(biāo)簽名稱執(zhí)行此操作時(shí)很好，但按類它似乎不起作用。我究竟做錯(cuò)了什么？謝謝！編輯。這是您更正后我的代碼的樣子。<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!")}
查看完整描述

4 回答

?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

我要補(bǔ)充一點(diǎn)，如果選擇器僅由一個(gè)元素使用，最好分配一個(gè) 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>


查看完整回答
反對(duì) 回復(fù) 2022-10-27
?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

文檔。

  1. getElementsByClassName 返回具有該類名的元素?cái)?shù)組（不帶點(diǎn)）

  2. querySelector 用于 css 選擇器（例如“.one”、“div.one”）

  3. querySelectorAll 像 2. 但返回?cái)?shù)組


查看完整回答
反對(duì) 回復(fù) 2022-10-27
?
料青山看我應(yīng)如是

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊

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>


查看完整回答
反對(duì) 回復(fù) 2022-10-27
?
揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

使用此行：document.getElementsByClassName(".one")[0] 您已經(jīng)針對(duì) div，因此將其更改 boxOne[0].onclick = 為： boxOne.onclick =



查看完整回答
反對(duì) 回復(fù) 2022-10-27
  • 4 回答
  • 0 關(guān)注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)