Question

问题： .classList.toggle在元素中添加或删除css类。它运作得很好，但我似乎偶然发现了一个限制，我希望有人可以告诉我一个方法。

当我使用Javascript设置元素样式时，例如.style.backgroundColor = "red"使用classList.toggle的后续行似乎无法覆盖此样式。

详细信息：以下代码运作完美。通过单击窗口，背景颜色从红色变为蓝色。

window.addEventListener("click", myFunction);
	
function myFunction(e) {
    document.getElementsByClassName("box_1")[0].classList.toggle("color_swap");
}

.box_1 {
	height: 100px;
	background-color: red;
	transition: all .5s;
}

.color_swap {
	background-color: blue;
	transition: all .5s;
}

<div class="box_1"></div>

然而，当我添加使用Javascript设置背景颜色的顶行时，转换不再有效。

document.getElementsByClassName("box_1")[0].style.backgroundColor = "red";
	
window.addEventListener("click", myFunction);
	
function myFunction(e) {
    document.getElementsByClassName("box_1")[0].classList.toggle("color_swap");
}

.box_1 {
	height: 100px;
	background-color: red;
	transition: all .5s;
}

.color_swap {
	background-color: blue;
	transition: all .5s;
}

<div class="box_1"></div>

有解决这个问题的方法吗？我希望能够在Javascript中设置属性，并仍然使用Javascript到toggle / add / remove类。非常感谢！

Answer 1

.box_1已经有background-color: red;，因此您不应该使用JavaScript设置内联样式。

添加到元素的内联样式将覆盖类中的样式。阅读有关特异性的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以使用!important覆盖该内容。

.color_swap {
    background-color: blue !important;
    transition: all .5s;
}

也许你的困惑在于风格如何运作。与对象的属性不同，切换类不会设置元素的样式。元素的最终风格最终取决于特异性。

使用.classList.toggle覆盖.style.property值似乎不起作用

1 个答案: