javascript - 如果启用了 javascript，则显示 div。必须有 !important

Question

我的主页上有一个特色 slider ，我已将其设置为在禁用 javascript 时完全隐藏。我有一个脚本，如果启用了 javascript，它会显示特色 slider 。

    document.write('<style type="text/css">#JQuerySlider1Container{ display: block !important;}</style>');

显然，根据 W3C，该代码无效。 (尽管它有效，所以这真是太糟糕了)。

我找到了一段我喜欢的替代代码，但我必须有 !important 才能显示 slider 。

document.getElementById('JQuerySlider1Container').style.display='block !important';

但它不适用于 !important。有人对此问题有简单的解决方案吗？

Answer 1

使用 JS 添加 CSS 不是好的做法。你应该将 HTML、JS 和 CSS 完全分开。

默认情况下，使用 JS 显示/隐藏事物的方式是使用 CSS 隐藏要隐藏的对象，例如:

#JQuerySlider1Container {display:none;}

在您的 JS 中，向主体添加一个类，使用如下内容:

$(function() {
    $('body').addClass('has-js');
}); 

然后你可以在知道你启用了 JS 的情况下编写特定的 CSS 规则，例如:

.has-js #JQuerySlider1Container {display:block;}