首頁(yè) 猿問 elem.classList.to...

elem.classList.toggle 不適用于所有元素

JavaScript

慕碼人8056858 2023-07-14 10:17:41

我有一些 HTML 代碼，如下所示：<html><head></head><body>testtesttesttesttesttesttest<style> .cls1 { color: red; } </style></body></html>然后我想使用一些 JavaScript 代碼來(lái)切換cls1這些元素的類。我輸入了這些行。輸出也如下：> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65false> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }debugger eval code:1:65debugger eval code:1:65false> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.toggle("cls1") }debugger eval code:1:65false> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); elem.classList.add("cls1") }undefined> for (elem of document.getElementsByTagName("span")) { console.log(elem); elem.classList.add("cls1") }debugger eval code:1:63debugger eval code:1:63debugger eval code:1:63debugger eval code:1:63debugger eval code:1:63debugger eval code:1:63debugger eval code:1:63undefined> for (elem of document.getElementsByClassName("cls1")) { console.log(elem); }debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65debugger eval code:1:65undefined我認(rèn)為錯(cuò)誤的是，document.getElementsByClassName可以找到所有七個(gè)元素，但elem.classList.toggle只適用于其中的一半。這對(duì)我來(lái)說是一個(gè)荒謬的問題。這里出了什么問題？

查看完整描述

1 回答

子衿沉夜

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

請(qǐng).querySelectorAll()改為使用，

與往常一樣，返回的集合是實(shí)時(shí)的，這意味著它始終反映以調(diào)用該函數(shù)的元素為根的 DOM 樹的當(dāng)前狀態(tài)。當(dāng)與名稱匹配的新元素添加到子樹時(shí)，它們會(huì)立即出現(xiàn)在集合中。同樣，如果與名稱不匹配的現(xiàn)有元素已調(diào)整其類集以使其匹配，則它會(huì)立即出現(xiàn)在集合中。

反之亦然；當(dāng)元素不再與名稱集匹配時(shí)，它們會(huì)立即從集合中刪除。

let elements = document.querySelectorAll(".cls1");

for(let elem of elements) {

? console.log(elem);

? elem.classList.toggle("cls1");

}

.cls1 {

? color: red;

}??

test

反對(duì) 回復(fù) 2023-07-14

1 回答
0 關(guān)注
157 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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

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

熱搜

最近搜索清空

elem.classList.toggle 不適用于所有元素

elem.classList.toggle 不適用于所有元素

1 回答

添加回答