Question

我在JavaScript中创建了一个如下所示的转换：

document.getElementById("container").style.opacity = "1";

并在CSS中：

#container {
opacity: 0;
transition: opacity 2s;
}

但是现在我安装了NoScript并且网站的内容没有显示，因为脚本无法运行。我能反对吗？

Answer 1

如果在禁用JavaScript时您的内容不可见，那么您应该从CSS中删除opacity: 0;，并让JavaScript初始化它，如下所示：

// we first hide the content using JS
// the content will be hidden *only and only if* JavaScript is enabled
document.getElementById('container').style.opacity = '0';

// we display the element after some delay or user interaction
setTimeout(function(){
    document.getElementById('container').style.opacity = '1';
}, 3000);

这是恕我直言的最佳解决方案。

或者，您可以这样做：

<html>
    <head>
        //...

        <style>
        .no-js #container {
            opacity: 1;
        }
        .js #container {
            opacity: 0;
            transition: opacity 2s;
        }
        </style>
    </head>
    <body class="no-js">
        <div id="container">your content</div>
        //...
        <script>
            document.body.classList.remove('no-js');
            document.body.classList.add('js');
        </script>
    </body>
</html>

您在class元素上使用CSS body，表示是否启用了JavaScript，并相应地设置内容的样式。

第二种技术非常强大，但要注意不要有太多.no-js xxx或.js xxx CSS选择器，因为它可能会对网站渲染性能产生负面影响，降低CSS可用性并使其复杂化。可维护性。

如果禁用脚本，则禁用转换？

1 个答案: