JavaScript：使用內聯onClick切換類？

我想複製css轉換here。JavaScript：使用內聯onClick切換類？

的例子類似，我已經創建了：

<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span> 

<div class="box"></div> 


.box { 
width: 150px; 
height: 150px; 
background-color: red; 
border: 1px solid #000; 
transition-property: all; 
transition-duration: .5s; 
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
} 

.grow { 
width: 350px; 
}

https://jsfiddle.net/swrhho41/15/

然而，這似乎沒有工作。增長的類沒有被添加到div。

是否還有更多的JS需要？

來源

2016-12-06 MeltingDog

不，我認爲你不需要它 – MeltingDog

看起來你的'onclick'處理程序正在尋找一個ID爲'box'的div，而你的HTML有一個帶有* box *'box'的div。 – mherzig

box不是id。這是一堂課。

因此，您的document.getElementById什麼也不選。只需將其更改爲，

document.getElementsByClassName('box')[0].classList.toggle('grow');

這裏的fiddle

來源

2016-12-06 00:28:55 choz

問題是你的onclick代碼尋找一個ID：getElementById

然而，你的div有一類不是一個ID，將其更改爲

<div id="box"></div> 

<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>

請務必同時更新你的CSS，如果你將其更新到ID：

#box { 
width: 150px; 
/* etc */

此外，如果你想要它的增長，使寬度在.grow!important。

小提琴：https://jsfiddle.net/swrhho41/18/

來源

2016-12-06 00:29:13 JanR

由於'box'是一個類名，你需要或者設置元素的ID是「盒子」：

<div id="box"></div>

或更新您的選擇是：

document.querySelector('.box').classList.toggle('grow')

來源

2016-12-06 00:31:01 hackerrdave

<div id="box" class="box"> 

</div>

您正在通過ID檢索該項目，因此ID應爲框

來源

2016-12-06 00:49:53 Yaman

JavaScript：使用內聯onClick切換類？

回答

相關問題