在页面加载之前隐藏 HTML 元素的正确方法是什么？答案

【问题标题】：What is the correct way to hide HTML elements on page load before they are displayed?在页面加载之前隐藏 HTML 元素的正确方法是什么？
【发布时间】：2012-10-03 12:48:02
【问题描述】：

我已经找到了许多关于这个问题的部分答案，但似乎没有一个明确的答案。对于如此重要的技术，我觉得这有点奇怪。

我应该如何隐藏元素（使用 javascript），以便在 JS 有机会隐藏它们之前在页面加载时它们不会短暂出现？我不想在最初用 CSS 将它们设置为隐藏，就好像用户没有 Javascript，他们什么也看不到。

要清楚。我不是在问如何处理向没有 JS 的用户显示内容。那是一个完全不同的主题。我只想要一种可靠的方法在 HTML 元素显示之前隐藏它们。

所以我的要求：

最初使用 CSS 不会隐藏 HTML 元素
如果 JS 可用，这些元素将被隐藏，因此它们永远不会显示，即使是瞬间也不会显示。这意味着将它们隐藏在正文末尾加载的 JS 中已经出来了）。

【问题讨论】：

听起来像是两个不同的问题。首先，您最初如何隐藏元素，其次，如果客户端没有 javascript（启用），您会怎么做。小心不要提出这些问题。
我认为使用modernizr 可能会有所帮助。您仍然可以指定使用 CSS 隐藏元素，因此对于没有 javascript 的浏览器，您可以使用 .no-js 类覆盖样式以显示它们。但我不太确定正在显示的元素的初始“闪烁”。这与代码的结构以及 Web 浏览器如何解析和显示它们有关。
@Erik Philips。我只提到这个要求是为了避免在样式表中收到诸如“将元素设置为显示：隐藏”之类的答案。

标签： javascript jquery html dom hide

【解决方案1】：

和 VKen 一样，我更喜欢使用 moderizr 和 Paul Irish's structure for the html element（这是 HTML5 Boilerplate 使用的）

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

然后在样式表中：

.element-to-hide { display: none; }

.no-js .element-to-hide { display: block; }

效果很好，没有闪烁的元素消失。

【讨论】：

【解决方案2】：

一种解决方案是使用 javascript 包含一个可选的 CSS 文件，您可以在其中隐藏这些 div。

把它放在你的HEAD 部分：

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

在hiding.css中：

div.mySelector {
   display:none;
}

如果您没有要设置的额外 css，您也可以更简单地在 javascript 中内联 css 规则（仍在 HEAD 中）：

<script>
document.write('<style type="text/css">div.mySelector {display:none; }</style>');
</script>

如果 Javascript 不可用，则不会隐藏 div。如果可用，CSS 将用于在 div 显示之前将其隐藏。

【讨论】：

谢谢。这种方法的浏览器支持是什么？
我在所有现代浏览器的 javascript 中使用 CSS 链接生成，但我不明白为什么旧浏览器会出现不兼容问题。

【解决方案3】：

使用后代组合器并尽快使主体成为类的成员。

<style>
    /* js only element */
    .js foo { display: none; }
</style>
</head>
<body>
<script> document.body.className += " js"; </script>

【讨论】：

谢谢。但是这个 JS 保证在页面渲染之前就已经运行了吗？
这实际上是我的首选方法。它会立即运行，因为它不依赖于加载任何库，并且是最简单的解决方案之一。我从来没有遇到过使用这种方法的问题。

【解决方案4】：

你可以做一个<noscript>标签并覆盖那些禁用javascript的初始css

【讨论】：