Javascript 使用JQuery隐藏div

我想在浏览器中加载页面后立即使用Javascript隐藏一个div。如果我使用以下代码，我可以做到这一点：

document.getElementById("div_id").style.display='none';

但是，当我尝试使用JQuery做同样的事情时，我注意到div在页面加载后的几秒钟内是可见的，然后它就隐藏了。我使用的JQuery代码是

$(document).ready(function() {

$("#div_id").css('display','none');

});

如果我使用

$（“#div_id”）.hide（），也会发生同样的情况

这是因为我使用的是一个库，这会稍微减慢进程，而不是直接使用document.getElementById。有办法解决这个问题吗

---

谢谢。

我认为原因是DOM逐步加载，而$（document）.ready事件正在等待DOM在执行之前完全加载

如果您真的希望在页面加载时元素不可见，您可以在CSS中定义该样式吗

我还没有尝试过，但是如果您仍然希望div对非Javascript用户可见，那么我认为您可以这样做：

<noscript>
  <style type="text/css">
  #elementid {display: block !important;}
  </style>
</noscript>

#elementid{display:block！important；}

我认为原因是DOM是渐进加载的，而$（document）.ready事件是在执行之前等待DOM完全加载

如果您真的希望在页面加载时元素不可见，您可以在CSS中定义该样式吗

我还没有尝试过，但是如果您仍然希望div对非Javascript用户可见，那么我认为您可以这样做：

<noscript>
  <style type="text/css">
  #elementid {display: block !important;}
  </style>
</noscript>

#elementid{display:block！important；}

您可以

• a） 直接在元素后面插入脚本元素以使用jQuery隐藏它：
• b） 通过直接使用DOM方法（如您的第一个代码段）创建不一致的Javascript
• c） 用CSS隐藏它的缺点是，对于支持CSS的非JS用户，他们将看不到任何东西

我会在A和C之间选择，虽然我不确定你到底在隐藏什么

A:

你也可以

• a） 直接在元素后面插入脚本元素以使用jQuery隐藏它：
• b） 通过直接使用DOM方法（如您的第一个代码段）创建不一致的Javascript
• c） 用CSS隐藏它的缺点是，对于支持CSS的非JS用户，他们将看不到任何东西

我会在A和C之间选择，虽然我不确定你到底在隐藏什么

A:

---

我认为更好的选择是设置div的样式，以便在编写页面时隐藏它，而不使用任何javascript

然后，每当您准备再次显示它时，请使用javascript将其取消隐藏：

$('#someId').show();

---

我认为更好的选择是设置div的样式，以便在编写页面时隐藏它，而不使用任何javascript

然后，每当您准备再次显示它时，请使用javascript将其取消隐藏：

$('#someId').show();

---

这可能是由于您包含脚本的方式造成的。浏览器必须在运行它们之前下载它们。因此，如果你有很多js文件，这可能会导致这个问题

这可能是由于您包含脚本的方式造成的。浏览器必须在运行它们之前下载它们。因此，如果你有很多js文件，这可能会导致这个问题

更有可能是因为您正在等待文档准备好隐藏它。如果您希望在默认情况下隐藏服务器端脚本，那么这看起来更像是服务器端脚本的作业。

更可能是因为您正在等待文档准备好隐藏它。如果您希望在默认情况下隐藏服务器端脚本，那么这看起来更像是服务器端脚本的作业。

有一个简单的解决方案。设置一个CSS类，如下所示

.js #div_id { display: none; }

然后使用以下jQuery

$('html').addClass('js');

$(document).ready(function() {

    /* normal code to run when DOM has loaded here */

});

如果用户启用了JavaScript，则

将立即隐藏（无闪烁），如果用户未启用JavaScript，则不会隐藏（这避免了选项c中可能出现的问题）

这是因为when可以在页面开始加载时立即访问

元素

---

document.getElementById（“div_id”）.style.display='none'的原因

之所以能可能是因为它位于元素之后的

中，因此脚本在执行之前不会等待整个DOM加载。

有一个简单的解决方案。设置一个CSS类，如下所示

.js #div_id { display: none; }

然后使用以下jQuery

$('html').addClass('js');

$(document).ready(function() {

    /* normal code to run when DOM has loaded here */

});

如果用户启用了JavaScript，则

将立即隐藏（无闪烁），如果用户未启用JavaScript，则不会隐藏（这避免了选项c中可能出现的问题）

这是因为when可以在页面开始加载时立即访问

元素

document.getElementById（“div_id”）.style.display='none'的原因

之所以能工作，可能是因为它位于元素后面的

中，因此脚本在执行之前不会等待整个DOM加载。

首先，使用

$（“#div_id”）.hide（）。对于jQuery来说，它更为惯用

其次，这是因为您使用的是
$（document）.ready
。通常，在DOM可用之前不会触发该事件。但是，由于
bindReady（）
的实现方式，在某些浏览器上，此事件可能相当于
onload
事件，在加载所有内容之前不会触发该事件。不幸的是，我所知道的解决这个问题的唯一方法（这不会给由于屏幕阅读器而无法使用JavaScript的残疾用户带来问题）是设置一个短超时（比如50ms），并在页面加载时反复检查
$（“#div_id”）
。这是一个可怕的黑客，我不太愿意推荐它，但它应该可以工作。也就是说，如果你知道大多数用户看不到flash内容，那么接受flash内容几乎更好。
首先，使用
$（“#div_id”）.hide（）。对于jQuery来说，它更为惯用

其次，这是因为您使用的是