Javascript初学者在这里。我本质上想做一个简单的切换。如果元素是黑色的,请将其更改为白色。如果是白色,请将其更改为黑色。
function changeClass() {
if (document.getElementById('myButton').style.backgroundColor == "white") {
document.getElementById('myButton').style.backgroundColor = "black";
} else {
document.getElementById('myButton').style.backgroundColor = "white";
}
}
<button class="normal" id="myButton" onclick='changeClass()' >Change Colour</button>
不过这段代码相当混乱。有一个更好的方法吗?
切换一个类:
function changeClass(){
document.getElementById('myButton').classList.toggle("the-class");
}
你的CSS在哪里:
.the-class {
background-color: black;
}
...假设元素的正常背景颜色是白色。
更多关于classList
here https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。支持很好,但在较旧的环境中您可能需要一个polyfill。
Example:
function changeClass() {
document.getElementById('myButton').classList.toggle("the-class");
}
.the-class {
background-color: black;
}
<button class="normal" id="myButton" onclick='changeClass()'>Change Colour</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)