gpt4 book ai didi

javascript - 通过 JS 覆盖转换后的 CSS 属性会使转换停止工作

转载 作者:太空宇宙 更新时间:2023-11-03 22:15:26 25 4
gpt4 key购买 nike

在下面的示例中,我想通过 JS 将 pad 的颜色更改为绿色,同时在它处于事件状态时将其转换为黄色。

但是,像这样通过 JS 更改颜色:pad.style.background = 'green' 将使转换停止工作。如果我删除此行,转换将正常进行。

为什么会这样,我该如何解决?

let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'
.pad{
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
<!DOCTYPE HTML>
<body>
<div class="pad"></div>
</body>

最佳答案

不工作的原因是因为 pad.style.background 将添加一个优先于 css 类的内联 css 样式

解决方案:

使用类而不是像下面代码中的内联样式:

let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}

.pad.green {
background: green;
}

.pad:active {
background: yellow;
}
<div class="pad"></div>

关于javascript - 通过 JS 覆盖转换后的 CSS 属性会使转换停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57101705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com