Question

我的网页包含DIV。如果启用了Javascript，我希望在页面加载时DIV不可见（display: none;）。如果JS被禁用，我希望它可见（display: block;）。

我能做到：

document.write('<div style="display:none;">...</div>');

或

document.getElementById('foo').style.display = 'none';

如果禁用JS，第一个代码将不会有DIV。对于第二个，DIV将在页面加载时显示，并在执行JS时消失。

我太傻了，无法解决这个问题。

我可以将JavaScript放在<div> - 标记内只写样式吗？当然不是这样的：

<div <script>document.write('style="display:none;"');</script>>

可能是这样的：

<div onLoad="document.write('<div style="display:none;">...</div>');">

有人有想法吗？

Answer 1

除非JS隐藏它，否则显示元素的一个问题是，即使使用JS，该元素也可能会显示，直到JS启动。因此，在文件顶部添加一些JS通常会更好直接将类放到根元素上，在CSS加载之前进入。这是一个简单的例子（在我的noob JS中）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
(function() {
    var root = document.querySelector('html');
    root.className = "js";
}());
</script>
<style media="all">

div {width: 500px; height: 200px; background: blue;}
.js div {display: none;}

</style>
</head>
<body>

<div></div>

</body>
</html>

这比使用老式<noscript>和document.write()等要好得多。

编辑：我应该注意，定位html元素的更简单方法是使用document.documentElement。因此，上面的代码可以写成 -

<script>
(function() {
    document.documentElement.className = "js";
}());
</script>

Answer 2

为什么不把<div>放在<noscript>？

<noscript><div style="display:none;">...</div></noscript>

现在你甚至不必使用Javascript来处理它。

仅在启用JavaScript时才定义特定的CSS样式

2 个答案: