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

我已经找到了这个问题的许多部分答案，但似乎没有什么似乎是一个明确的答案。 对于这样一个重要的技术，我发现这有点奇怪。

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

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

所以我的要求：

1. 最初使用CSS不会隐藏HTML元素
2. 如果JS可用，则隐藏这些元素，以便它们永远不会显示，甚至不会立即显示。 这意味着将它们隐藏在身体末端加载的JS中。

Answer 1

和VKen一样，我更喜欢使用moderizr和Paul Irish的html元素结构 （这是HTML5 Boilerplate使用的）

然后在样式表中：

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

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

Answer 2

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

把它放在你的HEAD部分：

并在hidden.css：

 div.mySelector { display:none; } 

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

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

Answer 3

使用后代组合子，尽快使身体成为一个类的成员。

Answer 4

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