我正在嘗試使用類名來切換類。當我切換時，我的代碼作業正常using id。我怎樣才能讓它作業一次只能看到一個紅色。
代碼筆
HTML：
<div class="mainmenu "onclick="hideshowmenu()">RED1</div>
<div id="submenu" class="submenu">
<div class="mainmenu "onclick="hideshowmenu()">RED2</div>
<div id="box" class="box">
js：
function hideshowmenu() {
var element = document.getElementsByClassName("box");
element.classList.toggle("bg-red");
}
CSS：
.bg-red{
margin-top:10px;
background-color:red;
height:20px;
}
uj5u.com熱心網友回復：
顧名思義getElementsByClassName，它回傳元素S，所以你得到的是 HTMLCollection，而不是一個元素。查詢第一個，像這樣：
function hideshowmenu() {
var element = document.getElementsByClassName("box")[0];
element.classList.toggle("bg-red");
}
或者：
function hideshowmenu() {
var elements = document.getElementsByClassName("box");
elements[0].classList.toggle("bg-red");
}
uj5u.com熱心網友回復：
document.getElementsByClassName("box") 回傳什么；是一個集合。您需要指定索引以訪問 classList 屬性。
你在做：
var element = document.getElementsByClassName("box");
element.classList.toggle("bg-red");
當你應該做
var element = document.getElementsByClassName("box");
element[0].classList.toggle("bg-red");
如果要切換多個值，也可以回圈遍歷元素。
示例代碼小提琴 https://jsfiddle.net/agy5jtb0/1/
uj5u.com熱心網友回復：
getElementsByClassName("box")回傳一組元素，但您將其視為單個元素，這是您的錯誤。我建議這樣的事情：
html：
<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
<div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
<div id="box" class="box"></div>
</div>
js：
function hideshowmenu(el) {
el.classList.toggle("bg-red");
}
uj5u.com熱心網友回復：
檢查這個（不確定這是否是你需要的）：
function hideshowmenu() {
var elements = document.getElementsByClassName("box");
for (let a of elements) {
a.classList.toggle("bg-red");
}
}.bg-red{
margin-top:10px;
background-color:red;
height:20px;
}<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
<div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
<div id="box" class="box"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339664.html
標籤：javascript html css
上一篇：型別錯誤：無法定義超出長度不可寫的陣列末尾的陣列索引屬性
下一篇：創建后事件發射器無法正常作業