Question

我想在不等待DOM加载的情况下向body标签添加一个类，但我想知道以下方法是否有效。我更关注有效性，而不是浏览器目前是否支持它。

<body>
  $("body").addClass("active");
  ...
</body>

谢谢，史蒂夫

Answer 1

如果DOM中不存在该元素，则搜索将无法找到它并且不会应用该操作。如果你不能在$（document）.ready（）函数中执行它，你可能想尝试将代码放在被引用的元素之后。我相信这会奏效。

<body>
   <div id='topStories'></div>
   <script type='text/javascript'>
     $('div#topStories').addClass('active');
   </script>
</body>

如果你需要将类添加到正文中，我肯定会使用$（document）.ready（）。

Answer 2

简短回答：这取决于。显然，根据我的测试，答案似乎是肯定的，取决于你想要什么。我刚试过这个：

<html>
<head>
    <style type="text/css">
        .foobar { background-color: #CCC; }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.document.body.className = "foobar";
    </script>
    <div style="border: solid 1px"><br /></div>
    <script type="text/javascript">
    // happens before DOM is fully loaded:
        alert(window.document.body.className);
    </script>
    <span>Appears after the alert() call.</span>
</body>
</html>

在IE 7中，当alert()发生时，值设置正确，但样式尚未应用（一旦DOM加载完成就会快速应用）。

在Firefox中，样式已在alert()发生时应用。

无论如何，希望这对你有所帮助。

Answer 3

.elementReady() plugin似乎与你正在寻找的非常接近。

它使用setInterval循环进行操作，只有document.getElementById()返回给定id的元素时才会退出。

您可以对该插件稍作修改（或提交更新/补丁）以允许通用选择器（至少对于“tagNames”）而不仅仅是id。

我不相信在加载元素之前有任何真正可靠的跨浏览器兼容方式来处理元素 - 除了这种setInterval黑客攻击

除非您能够将您的javascript命令放在中，否则目标元素就像@JasonBunting所示。

Answer 4

基本上，答案是否定的。在IE6和Firefox 2（我最常见的浏览器）中，元素在关闭标记之后（或者页面完成渲染，对于无效的XHTML）不在DOM中。我知道jQuery提供了一种方便的方法，似乎反应迅速，以避免在大多数情况下“闪烁”。你可以像这样使用它：

<script>
  $(document).ready(function() {
    $("body").addClass("active");
  });
</script>
<body>
  ..
  ..
  ..
</body>

但这是关于javascript的。

当然，在您提供的示例中，您可以轻松地完成相同的效果：

<body class="active">
</body>

Answer 5

这非常有帮助。

为这个问题设置一个真实的世界。

我构建时假设不支持JavaScript，然后使用JavaScript覆盖。问题是，当我必须等待DOM加载之前，我的覆盖在网站中进行加载时会经历闪烁阶段。我希望如果我可以在加载网站的其余部分之前向body元素添加一个“active”类，我将能够在页面呈现之前应用JavaScript假定的样式。

我不想做的就是添加这个，然后在Firefox4出来时接听电话我不应该这样做。

如果你看一下我建立的网站，你会发现它会优雅地降级，但那个ficker会让我感到烦恼（特别是如果一个广告挂起了网站）。我可以采取其他人的方法，只是用JS假设它，但来吧 - 这只是懒惰......

Answer 6

而不是在你的＆lt; body＆gt;中添加一个类标记您可能会发现更容易将类添加到＆lt; html＆gt;通过执行标记：

<script type="text/javascript">
    document.documentElement.className = 'active';
</script>

我可以在元素关闭之前对其进行定位吗？

6 个答案: