提问人：at. 提问时间：3/10/2011 更新时间：3/10/2011 访问量：487
仅当 Javascript 可用时才隐藏 html
Hide html only when Javascript is available
问：
我想这更多的是关于 SEO，而不是想要支持禁用 Javascript 的浏览器。我有 Javascript/jQuery 代码，可以读取一些 html 并且基本上显示得更好。在此过程中，html实际上被删除了（使用jQuery的函数）。.remove()
因此，我隐藏了html，以便在页面加载时没有任何视觉伪影。但现在我只想在启用 Javascript 时隐藏它。我想最简单的事情是加入一些 Javascript，将 css 规则添加到适当的元素中。<head>display: none
有没有更好的方法来处理这种情况？
答：
2赞
T.J. Crowder
3/10/2011
#1
我可能会使用一个脚本来设置一个 body 上的类，然后您可以在 CSS 中引用，但基本上，您走在正确的轨道上。
例如：
<body>
<script>document.body.className = "jsenabled";</script>
然后你的CSS规则：
body.jsenabled selector_for_your_initially_hidden_content {
display: none;
}
只有当身体有类时，规则才会生效。
完整示例：
HTML（和内联脚本）：
<body>
<script>document.body.className = "jsenabled";</script>
<div class='foo'>I'm foo, I'm hidden on load</div>
<div>I'm not foo, I'm not hidden on load</div>
<div class='foo'>Another foo</div>
<div>Another bit not hidden on load.</div>
</body>
CSS：
body.jsenabled div.foo {
display: none;
}
实时复制我只使用“foo”类作为示例。它可以很容易地成为一个结构选择器。
评论
0赞
ullmark
3/10/2011
效果最好，因为 Akarun 解决方案可能会在 dom 完全加载之前引起轻微闪烁。
0赞
Akarun
3/10/2011
是的，这取决于您拥有的“隐藏块”数量！
0赞
T.J. Crowder
3/10/2011
@Akarun：我不认为是这样。添加类可以很容易地使用选择器隐藏任何你想要的东西，无论是结构选择器，还是（如果所有其他方法都失败了）通过向内容添加一个类来隐藏（如示例中，为了清楚起见）。body
0赞
Akarun
3/10/2011
#2
将类添加到要隐藏的每个 div（或块）中，并在标头中添加以下 JS 代码：hiddenblock
$(document).ready(function() {
$(body).addClass('jsenable');
$('.hiddenblock').hide();
}
您还可以使用该类来屏蔽或修改其他一些块，如下所示：jsenable
.jsenable #myblock { position: absolute; right: 10000px; }
评论
1赞
at.
3/10/2011
加载页面时不会闪烁非javascript html吗？
5赞
katsuya
3/10/2011
#3
我认为使用 noscript html 标签可以完成这项工作。如果在用户浏览器中禁用了脚本，则标签会显示其中的内容。
2赞
rsp
3/10/2011
#4
任何 JavaScript 只有在启用 JavaScript 时才能工作，因此无论您如何使用 JavaScript 进行操作，它始终只有在启用 JavaScript 时才能工作，因此您永远不必为此进行测试。
话虽如此，您可以在 HTML5 样板中看到它是如何完成的：
<html class="no-js" lang="en">
... the rest of the page
</html>
使用应用于标记的类。稍后使用 JavaScript 删除该类并添加一个类，您可以在 CSS 和 HTML 中使用这两个类：no-js<html>js
<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>
或者在 CSS 中：
.no-js #someWidget { display: none; }
.js #someFallback { display: none; }
如果你使用的是 Modernizr，那么它已经会为你更改这些类，但即使你不这样做，你所要做的就是：
document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/,'js');
这是一个简单而优雅的解决方案，您所需要担心的只是样式和标记中的 CSS 类。
评论