Javascript 呈现最初隐藏的HTML元素的正确方法

多年来，我一直在HTML中使用类似的内容来隐藏元素：

<div style="display: none"></div>

没关系，但我再也不能忍受排队了

在JavaScript

窗口中以编程方式隐藏元素。onload

事件太晚了——它将在屏幕上闪烁

我可以创建CSS类“隐藏”，但使用浏览器的积极加载策略（如Opera），该块可能会出现一秒钟（在加载CSS之前）

---

有没有更好的方法？

据我所知，

class=“hidden”

方法是最好的，也是最常用的。我建议您使用

class=“hidden”

“但使用浏览器的积极加载策略（如Opera），块可能会出现一秒钟（在加载CSS之前）。”

---

我不使用Opera，但是如果任何浏览器在应用样式之前加载了页面，那么很多东西看起来都是错误的，不仅仅是隐藏的元素。我不知道有哪个浏览器会这样做。

我最近开始使用节点对象，我越来越喜欢这种方法。这样，您就不必使用隐藏的HTML元素，只需放置一个锚点，例如：

<a name="some-anchor" id="some-anchor-id" />

---

然后将其替换为已创建的节点。这样，您就不必担心加载时元素会闪烁，因为不会有任何元素。

根据元素的不同，可以在页面加载后使用javascript生成和插入元素（而不是在页面加载后隐藏）。这只是一个想法，虽然对于没有启用javascript的用户来说，它不会优雅地降级…

如果您有一个只显示HTML的页面，这些元素会显示出来吗

默认情况下，这些元素会显示给屏幕阅读器，这不是很好，也不是很容易访问，是吗

如果你只有HTML+CSS页面，你就不能取消隐藏这些元素，那么除了黑帽SEO技巧之外，它们没有任何意义

如果你有一个HTML+CSS+JS页面，那么拥有它们是有价值的

只有在启用JS时才有价值。这意味着它们应该存在于javascript中

使用javascript创建这些元素并将它们注入DOM

---

如果你使用HTML、HTML+CSS、HTML+CSS+JS从头开始构建网站，那么你就会意识到它们属于你的javascript代码。请随意阅读有关

的更多信息。您可以在页面的。它比内联稍干净一些，但您必须在所有页面上都有单一的类定义。不过，我还是会尝试使用单个动态页脚/页眉。

您可以在隐藏样式中添加一个固定位置，将其带出浏览器窗口。这可能是避免在Opera中div闪烁的解决方案

例如：

.super_hide{
    position:fixed;
    top:-1000px; /* you would need to know how height the content is or put something huge*/
}

---

希望这会有所帮助

你已经为使用内嵌样式做了一个很好的例子。如果“块可能会出现一秒钟（在加载CSS之前）”，那就意味着整个页面将在没有任何样式的情况下显示。这在opera中真的发生了吗？可能是重复的，这也是搜索引擎友好的吗？如果以这种方式插入网站的所有可搜索内容，爬虫程序可能找不到。是的，你是对的，但同样，搜索引擎将只看到带有

class=“hidden”

的块的初始内容。如果您有一些动态变化的内容，爬虫程序无论如何都无法访问。@IgorZinov'yev这是特定于情况的，但我认为使用

class=“hidden”

表明您有静态内容，这些内容最初隐藏在页面中，然后在用户操作中显示。而静态内容可能需要提供给搜索引擎。如果您计划通过Ajax加载内容或切换出内容，通常不需要

class=“hidden”

。关于优雅的降级-这同样适用于

class=“hidden”

。没有JS，用户什么也得不到。@IgorZinov'yev，但你的HTML中有无用的标记，这与你的HTML无关。这是死代码，这是一个很好的观点。这就是我通常在页面加载时隐藏元素的原因，因此信息是可搜索的，并且可以在禁用JS的情况下访问。大多数情况下，我希望隐藏的块稍后显示在隐藏的地方…然后可以通过JavaScript删除该类，如果这样做，元素将按预期出现。这似乎会触发回流，我不知道这是否会是一个问题，只是考虑到在JS中创建复杂元素\HTML块（琐碎元素不太常见）的唯一干净方法是客户端模板。模板本身通常放置在隐藏块中：）@artvoik您忘记了DOM。您可以使用DOM轻松创建复杂元素。在创建复杂元素时，这将在JS代码中完成，这是不好的，因为模板设计器不再可以更新它。您希望javascript ui小部件的标记由不懂javascript的人编写吗？不，谢谢，他们知道JS，但是如果我需要呈现一些非常复杂的东西，比如说一个带有图像、标题、描述、价格、附加数据（如费率、星级（大量标记、CSS类等）的自动完成项，客户端模板似乎是唯一的选择。还有一个想法-我不喜欢在JS中创建大量DOM节点，因为这种情况下HMTL在我的模板和JS中。-1：参见例如，从2010年开始（问题提出前一年）@Clément这个问题只是关于如何隐藏元素，而不是关于一般问题。FOUC有着悠久的历史，但一般来说，如果你得到了它，你应该改变你的风格加载方式。在所有浏览器中，从页面的

链接到CSS基本上是完全安全的。但无论如何，FOUC都超出了这个问题的范围。