有没有另一种方法可以在 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，我害怕迅猛龙攻击。有什么建议么？

Answer 1

我不建议直接从 JavaScript 应用样式，因为如您所见，内联样式始终具有优先权，除非您使用!important标志。作为一种解决方法，您可以使用 JavaScript 使用 将 CSS 类添加到您的元素element.classList.add，然后您可以对样式进行更多控制。