我能否在元素关闭之前定位它？

Question

我能否在元素关闭之前定位它？

4

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

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

感谢您，史蒂夫。

- Steve Perks

6个回答

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()触发时已经应用。

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

- JasonBunting

2

.elementReady()插件似乎非常接近您所寻找的东西。

它通过使用setInterval循环来操作，一旦document.getElementById()返回给定id的元素，就会退出。

你可能可以对该插件进行轻微修改（或提交更新/补丁），以允许使用通用选择器（至少针对“tagNames”）而不仅仅是id。

我不认为有任何真正可靠的跨浏览器兼容方法可以在加载之前访问元素 - 除了这种类型的setInterval黑客方法

除非您能够像@JasonBunting建议的那样将javascript命令放置在目标元素内部。

- Már

1

基本上，答案是否定的。在IE6和Firefox 2（我最有经验的浏览器）中，元素直到关闭标签之后（或页面完成呈现，对于无效的XHTML）才存在于DOM中。我知道jQuery提供了一种方便的方法，似乎可以在大多数情况下快速地避免“闪烁”。你可以像这样使用它：

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

但这大概就是 JavaScript 的全部了。

当然，在您提供的示例中，您可以轻松地使用以下方式实现相同的效果：

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

- Adam N

0

不必将类添加到您的 <body> 标签中，您可能会发现将类添加到 <html> 标签更容易，方法如下：

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

- Ian Oxley

0

非常有帮助。

为了让问题更具现实意义。

我建立在 JavaScript 不被支持的假设上，然后用 JavaScript 覆盖。问题是，当我必须等待 DOM 加载完成才能启动我的覆盖时，网站会经历闪烁阶段，因为它正在构建中。我希望如果我能在其余部分加载之前向 body 元素添加一个 "active" 类，我就能在页面呈现之前应用 JavaScript 假定的样式。

我不想这样做，然后在 Firefox4 推出时接到电话说我不应该这样做。

如果你看一下我建立的网站，你会发现它优雅地降级，但那个闪烁令我困扰（特别是如果广告挂起了网站）。我可以采取其他人的方法，只是用 JS 假定构建，但拜托 - 那只是懒惰...

- Steve Perks

@Jason，FF和IE反应不同的知识。这基本上回答了我的最初问题，但考虑到Mar帮我找到了解决方案，我必须给他点赞。但愿我能分享它 :) - Steve Perks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

如果元素在DOM中不存在，搜索将无法找到它，动作也不会被应用。如果您不能在$(document).ready()函数中执行操作，可以尝试将代码放置在引用元素之后。我相信这样会起作用。

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

如果您需要将类添加到body中，我一定会使用$(document).ready()。