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

Question

我的主页上有一个特色滑块，如果禁用 javascript，我已经将其完全隐藏。如果启用了 javascript，我有一个脚本会显示特色滑块。

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

显然，根据 W3C，该代码无效。（尽管它起作用了，所以这真是太可惜了）。

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

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;}