代码之家 › 专栏 › 技术社区 › Steve Perks

我能在元素关闭之前瞄准它吗?

dom css html jquery javascript

Steve Perks · 技术社区 · 17 年前

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

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

谢谢, 史蒂夫

6 回复 | 直到 8 年前

Már Örlygsson 17 年前

这个 .elementReady() plugin 似乎和你要找的很接近。

它通过使用 setInterval 循环,一旦 document.getElementById() 返回给定的元素 id .

您可能会对该插件做一些细微的修改(或者提交一个更新/补丁),以允许使用通用选择器(至少对于“标记名”),而不仅仅是 身份证件 S.

我不相信有任何真正可靠的跨浏览器兼容的方法可以在加载元素之前解决它——除了这种 设定间隔 黑客攻击

除非你能放置你的javascript命令里面像@jasonbunting这样的目标元素表明。

tvanfosson 17 年前

如果元素不存在于DOM中,则搜索将找不到它,并且不会应用该操作。如果不能在$(document.ready()函数中执行此操作,则可能需要尝试将代码放在被引用元素之后。我相信这会奏效的。

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

如果需要将类添加到主体中,我肯定会使用$(document.ready()。

Jason Bunting 17 年前

简短回答:视情况而定。显然,根据我的测试,答案似乎是肯定的,这取决于你想要什么。我刚测试过:

<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,它就会快速应用)。

在火狐中,当 警报() 发生。

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

Adam Ness 17 年前

基本上,答案是否定的。在ie6和firefox 2(我最熟悉的浏览器)中,元素在结束标记(或者页面渲染完成,对于无效的xhtml)之前不在dom中。我知道jquery提供了一种方便的方法,它的响应速度似乎足够快,在大多数情况下可以避免“闪烁”。您可以这样使用它:

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

但这是关于JavaScript的。

当然,在您提供的示例中,您可以轻松地通过以下方式实现相同的效果:

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

Steve Perks 17 年前

这很有帮助。

给这个问题一点真实的感觉。

我假设不支持javascript,然后用javascript重写。问题是,当我必须等待DOM加载时,在我的覆盖触发之前,站点会在构建时经历闪烁阶段。我希望如果我能在网站的其余部分加载之前向body元素添加一个“active”类,我就能在页面呈现之前应用javascript假定的样式。

我不想做的是添加这个,然后在FireFox4出来的时候接到一个我不应该这样做的电话。

如果你看看我建的一个网站,你会发现它有失体面,但那个恶棍让我心烦意乱(尤其是当一个广告挂断了网站的时候)。我可以采用其他人的方法,只是用JS来构建它,但是拜托-那只是懒惰……

Ian Oxley 17 年前

与其将类添加到您的<body>标记中,您可能会发现通过执行以下操作更容易将类添加到<html>标记中:

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