有没有另一种方法可以在 JS 设置一个值后添加“悬停”效果而不使用 !important ？

Question

学习网站开发（HTML、CSS、JS、PHP、yadda yadda）。我正在尝试通过 CSS 在元素上创建悬停效果，但是在 JS 函数设置了一个值之后，似乎我无法在不使用 !important 的情况下进行覆盖。我在 JS 中有一个滚动功能，可以设置不透明度/颜色/等。在用户向下滚动后。由于 JS 似乎直接影响元素内联样式，因此它的特异性始终高于我的样式表中的任何内容。因此，我的 :hover 效果（增加按钮的不透明度）将被覆盖。window.onscroll = function() {arcScrollEffect()}; // calls scroll function on scrollingfunction arcScrollEffect() {    btn = document.getElementsByClassName("arcHeaderBtn")[0];    if (document.body.scrollTop > 50 || document.documentElement.scrollTop) {        btn.style.width = '20%';        btn.style.fontSize = '2em';        btn.style.backgroundColor = '#DDD';        btn.style.color = 'rgba(0, 0, 0, 1)';        btn.style.opacity = '0.3';    } else {        btn.innerHTML = 'RED';    }}.arcHeaderBtn {    background-color: inherit;    border: none;    position: fixed;    top: 10vh;     left: 0;    width: 100%;    font-size: 6em;    text-align: center;    opacity: 0.5;    border-radius: 0 0.6em 0.6em 0;    transition: color 1s, background-color 1s, width 1s, top 1s, font-size 1s, opacity 1s;}button.arcHeaderBtn:hover {    opacity: 0.5 !important;}<button class="arcHeaderBtn">Button</button>请注意，在这种特殊情况下，我确实有一个解决方法，例如根本不在 JS 中设置不透明度或在 CSS 中使用 !important （工作正常）。然而，有人告诉我 !important 不是好的编码，它相当于旧语言中的 GOTO，我害怕迅猛龙攻击。有什么建议么？

Answer 1

我不建议直接从 JavaScript 应用样式，因为如您所见，内联样式始终具有优先权，除非您使用!important标志。

作为一种解决方法，您可以使用 JavaScript 使用 将 CSS 类添加到您的元素element.classList.add，然后您可以对样式进行更多控制。