在 JS 设置值之后，是否有另一种方法可以在没有 !important 的情况下添加“悬停”效果？

Question

学习网站开发（HTML、CSS、JS、PHP、yadda yadda）。我正在尝试通过 CSS 在元素上创建悬停效果，但是在 JS 函数设置了值之后，如果不使用！important，我似乎无法覆盖。

我在 JS 中有一个滚动功能，可以设置不透明度/颜色/等。用户向下滚动后。似乎 JS 直接影响元素的内联样式，它总是比我的样式表中的任何东西都具有更高的特异性。因此，我的 :hover 效果（增加按钮的不透明度）将被覆盖。

window.onscroll = function() {arcScrollEffect()}; // calls scroll function on scrolling
function 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 和 I fear velociraptor attacks. 有什么建议吗？

Answer 1

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

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