@Andrew，
我知道答案已经被接受了，但是使用 display: none; 会给没有JavaScript的用户带来噩梦。
使用内联JavaScript，您可以隐藏一个元素而不会使其闪烁。没有JavaScript的用户仍然能够看到它。
考虑一下在页面加载时应该隐藏的几个div。
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<div id="hide-me">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me").hide();
</script>
<div id="hide-me-too">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me-too").hide();
</script>
</body>
内联Javascript会在元素呈现时立即运行，因此将其隐藏在用户视野之外。
我同意Boris Guéry的看法，这并不是过度工程，而是标准的最佳实践。我会与Boris略有不同，首先在html中添加一个no-js类，然后再用JavaScript将其删除。
这样你就无需等待文档准备就绪即可隐藏内容，并且没有任何JavaScript的情况下仍然可以看到内容。假设用户没有JavaScript更符合渐进增强的哲学。
例如：
<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>
我的CSS：
#foo {
display: none;
}
html.no-js #foo {
display: block;
}
以及JavaScript
$(document).ready(
function()
{
$('html').removeClass('no-js');
}
);
********* 或基于每个案例的情况 ***********
例如：
<div class="no-js" id="foo">foobar and stuff</div>
CSS：
.no-js {
display:none;
}
#foo {
display: block;
}
#foo.no-js {
display: none;
}
js:
$(document).ready(function(){
// remove the class from any element that has it.
$('.no-js').removeClass('no-js');
});
当 JavaScript 启用时，我通常会给我的元素设置一个 .js 类来设置正确的属性。
然后，我可以根据 JavaScript 是否存在来设置 CSS。
例如：
<html class="js">
<body>
<div id="foo"></div>
</body>
</html>
我的 CSS：
html.js #foo
{
display: none;
}
以及 JavaScript
$(document).ready(
function()
{
$(html).addClass('js');
}
);
// Hide HTML element ASAP
$('html').hide();
// DOM-ready function
$(function () {
// Do stuff with the DOM, if needed
// ...
// Show HTML element
$('html').show();
}
在元素中设置初始显示属性没有任何问题，尤其是如果您将其封装在CSS类中。
我也曾经为此苦恼过，特别是在IE浏览器中。我发现这篇文章非常有用：http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/
<html>
<head>
<style>
/* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...)
gets loaded with such a class this would be also overwritten. This solution does
not require the class. It is here just to show that it has no effect
if JS is activated.*/
.hidden {
display: block;
background: red;
}
</style>
<script>
// this is copied from the linked stackoverflow reply:
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */
window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function (cssText, node) {
if (!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
}
// And now: This class only gets defined if JS is enabled. Otherwise
// it will not be created/overwritten.
setStyle('.hidden { display: none; }');
// Attention: Now that the class is defined it could be overwritten
// in other CSS declarations (in style tags or with loaded CSS files).
</script>
</head>
<body>
<button>Show/Hide</button>
<div class="">before</div>
<div class="my-element hidden">
Content that should be initially hidden if possible.
You may want to multiply this div by some thousands
so that you see the effect. With and without JS enabled.
</div>
<div class="">after</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
// Here is some 'normal' JS code. Very likely loaded as a JS file:
$('button').click(function () {
$('.my-element').toggleClass('hidden');
// or setting display directly:
// $('.my-element').toggle()
// but well, having class hidden though it is not
// hidden makes is not so nice...
})
</script>
</body>
</html>
经过一段时间的思考，我得到了以下解决方案的想法。与我的其他方案相比，我将它简化为必要的部分（并使用this通过JS添加了一个类）：
<html>
<head>
<style>
/* This could be also part of an css file: */
.container-with-hidden-elements .element {
display: none;
}
</style>
</head>
<body>
<div class="container">
<script>
document.getElementsByClassName('container')[0]
.className += ' container-with-hidden-elements';
</script>
<div class="element">Content that should be initially hidden if possible.</div>
</div>
</body>
</html>
你可以在CSS类中应用"display: none"。
因为浏览器需要按照一定的顺序读取HTML代码，为了让JavaScript找到该元素。你需要在浏览器读取您的HTML时将元素标记为隐藏状态。
但是你也可以将HTML插入到你的JavaScript中，在呈现之前调用hide方法。
有很多答案，你可以使用show()方法并编写条件来显示或隐藏。这是示例代码在渲染完成时显示/隐藏
<div id="banner-message">
<p id="hello">Hello World!!!!!</p>
<input id="statusconf" value="" type="checkbox">Show hello world text when i click this check box
<button>Change color</button>
</div>
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
//Set this up as part of document ready if you wish
//$(document).ready(function(e) {
$("#statusconf").show(function(e) {
if ($("#statusconf").is(':checked') === false) {
$('#hello').hide();
} else {
$("#hello").show();
}
});
$("#statusconf").on("click", function(e) {
if ($("#statusconf").is(':checked') === false) {
$('#hello').hide();
} else {
$("#hello").show();
}
});
//});