Javascript 我可以在元素之前将其作为目标吗';什么时候关门?

Javascript 我可以在元素之前将其作为目标吗';什么时候关门?,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,我想在不等待DOM加载的情况下向body标记添加一个类,但我想知道下面的方法是否有效。我现在更关心的是有效性,而不是浏览器是否支持它 <body> $("body").addClass("active"); ... </body> $(“正文”).addClass(“活动”); ... 谢谢, Steve如果DOM中不存在该元素,则搜索将无法找到该元素,并且不会应用该操作。如果无法在$(document).ready()函数中执行此操作,则可能需要尝试将代码

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

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

$(“正文”).addClass(“活动”);
...
谢谢,
Steve

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

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

$('div#topStories').addClass('active');

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

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

<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>

.foobar{背景色:#CCC;}
window.document.body.className=“foobar”;

//在DOM完全加载之前发生: 警报(window.document.body.className); 在alert()调用后显示。
在IE 7中,当发生
alert()
时,值设置正确,但尚未应用样式(DOM加载完成后会立即应用样式)

在Firefox中,
alert()
发生时已经应用了该样式

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

那很有帮助

让这个问题有一点真实性

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

我不想做的是添加这个,然后在Firefox4出来时接到一个电话,说我不应该这么做


如果你看一看我创建的网站,你会发现它的性能下降得很好,但这让我很恼火(特别是如果有广告挂断了网站)。我可以采用其他人的方法,只使用JS来构建它,但别这样-那只是懒惰…

基本上,答案是否定的。在IE6和Firefox2(我最有经验的浏览器)中,元素直到关闭标记(或者页面渲染完成,对于无效的XHTML)之后才出现在DOM中。我知道jQuery提供了一种方便的方法,在大多数情况下,它的反应似乎足够快,可以避免“闪烁”。您可以这样使用它:

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

$(文档).ready(函数(){
$(“正文”).addClass(“活动”);
});
..
..
..
但这就是javascript的内容

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

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

这似乎与您想要的非常接近

它使用
setInterval
循环进行操作,该循环在
document.getElementById()返回给定
id
的元素时立即退出

您可能需要对该插件稍作修改(或提交更新/补丁),以允许使用通用选择器(至少是“标记名”),而不仅仅是
id
s

我不相信有任何真正可靠的跨浏览器兼容方式可以在加载元素之前对其进行寻址-除了这种
setInterval
hacking之外


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

与向标记添加类相比,您可能会发现向标记添加类更容易:

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

document.documentElement.className='active';

如果我没弄错的话,你是说元素在关闭之前是不存在的。对吗?我是说这是最安全的方法。我假设,由于元素可能没有完全指定(缺少结束标记),浏览器在完全解析之前不会将其添加到DOM中。不过,我不能指出一个强制执行这一点的标准。我会再详细阐述一下,看看我能激发出更多的神经元——干杯。@Jason,FF和IE反应不同的知识。这基本上回答了我最初的问题,但考虑到马尔给了我解决方案,我不得不给他荣誉。但愿我能分享它:)