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

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 来切换/添加/删除类。非常感谢!

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;
}

也许您的困惑在于样式的工作方式。与对象的属性不同，切换类不会设置元素的样式。元素的最终样式最终取决于具体情况。