Javascript 呈现最初隐藏的 HTML 元素的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7148595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper way to render initially hidden HTML elements
提问by artvolk
I'm for years using something like this in my HTML for elements which should be hidden:
我多年来在我的 HTML 中使用类似这样的东西来处理应该隐藏的元素：
<div style="display: none"></div>
It's ok, but I can't stand in-line styles anymore.
没关系，但我不能再忍受直列样式了。
Hiding elements programatically in JavaScript
window.onloadevent is too late -- it will flash on the screen.I can create CSS class 'hidden', but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded).
在 JavaScript
window.onload事件中以编程方式隐藏元素为时已晚——它会在屏幕上闪烁。我可以创建 CSS 类“隐藏”，但是使用浏览器的积极加载策略（如在 Opera 中），该块可能会出现一秒钟（在加载 CSS 之前）。
Is there any better way?
有没有更好的办法？
采纳答案by Robin Winslow
As far as I know the class="hidden"method is the best and most commonly used. I suggest you use class="hidden".
据我所知，这种class="hidden"方法是最好的，也是最常用的。我建议你使用class="hidden".
"but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded)."
“但使用浏览器的积极加载策略（如在 Opera 中），块可能会出现一秒钟（在加载 CSS 之前）。”
I don't use Opera, but if any browser loaded the page before applying styles then a lot would look wrong, not just your hidden elements. I don't know of any browser doing this.
我不使用 Opera，但是如果任何浏览器在应用样式之前加载了页面，那么很多看起来都会出错，而不仅仅是隐藏的元素。我不知道有任何浏览器这样做。
回答by Igor Zinov'yev
I have recently started using node objects, and I like this approach more and more. This way you don't have to use hidden HTML elements, you just place, for example, an anchor:
我最近开始使用节点对象，我越来越喜欢这种方法。这样你就不必使用隐藏的 HTML 元素，你只需放置，例如，一个锚点：
<a name="some-anchor" id="some-anchor-id" />
and then replace it with a created node. This way you won't have to worry about elements flickering on load, because there won't be any.
然后用创建的节点替换它。这样你就不必担心加载时元素闪烁，因为不会有任何元素。
回答by Dan
Depending on what the element is, it might be acceptable to generate and insert the element using javascript after the page has loaded (rather than hiding it after page load). Just a thought, although it wouldn't degrade gracefully for users without javascript enabled...
根据元素是什么，在页面加载后使用 javascript 生成和插入元素可能是可以接受的（而不是在页面加载后隐藏它）。只是一个想法，虽然它不会为没有启用javascript的用户优雅地降级......
回答by Raynos
If you have a HTML only page those elements would be shown?
如果你有一个只有 HTML 的页面，那些元素会被显示出来吗？
These elements are shown to screen readers by default, that's not very nice or accessible is it?
默认情况下，这些元素会显示给屏幕阅读器，这不是很好或易于访问，是吗？
If you have HTML+CSS only page you can't unhide these elements, then there's no point in them apart from black hat SEO tricks.
如果您只有 HTML+CSS 页面，您无法取消隐藏这些元素，那么除了黑帽 SEO 技巧之外，它们没有任何意义。
If you have a HTML+CSS+JS page then there is value in have them.
如果你有一个 HTML+CSS+JS 页面，那么拥有它们是有价值的。
There is only value in having them when you have JS enabled. This means they should _exist in the javascript
只有在启用 JS 时拥有它们才有价值。这意味着它们应该 _exist 在 javascript 中
Use javascript to create these elements and inject them in the DOM.
使用 javascript 创建这些元素并将它们注入到 DOM 中。
if your build your website from the ground up using HTML, HTML+CSS, HTML+CSS+JS then you would realize they belong in your javascript code. Feel free to read more about Progressive Enhancement
如果您使用 HTML、HTML+CSS、HTML+CSS+JS 从头开始构建您的网站，那么您会意识到它们属于您的 javascript 代码。随意阅读有关渐进增强的更多信息
回答by zoomix
You could define the class in of the page. It's slightly cleaner than inline, but you would have to have that single class definition on all pages. But then again, I'd try to use a single dynamic footer/header anyway..
您可以在页面中定义类。它比内联稍微干净一点，但是您必须在所有页面上都有那个单一的类定义。但是话又说回来，无论如何我都会尝试使用单个动态页脚/页眉..
回答by No_or_yes
You could add to the hidden style a fixed position which would bring it out of a browsers window. This may be a solution to avoid having the div blink in Opera.
您可以向隐藏样式添加一个固定位置，将其带出浏览器窗口。这可能是避免在 Opera 中出现 div 闪烁的解决方案。
For example:
例如：
.super_hide{
position:fixed;
top:-1000px; /* you would need to know how height the content is or put something huge*/
}
Hoping this will help!
希望这会有所帮助！
