2008-10-27 67 views
3

我想添加一个类到body标签而不用等待DOM加载,但我想知道下面的方法是否有效。我比现在浏览器是否支持它更关心有效性。可以在元素关闭之前定位元素吗?

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

谢谢你,史蒂夫

回答

2

.elementReady() plugin似乎是相当接近你在找什么。

它的工作通过使用setInterval循环,即只要document.getElementById()返回给定id一个元件出射。

你也许可以做到这一点插件稍作修改(或提交的更新/补丁),以允许通用的选择(至少对于“标记名”),而不是仅仅id秒。

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

除非你能够把你的JavaScript命令像@JasonBunting的目标元素建议。

2

如果元素不在DOM存在,搜索将无法找到它和行动将不会被应用。如果你不能在$(document).ready()函数中做到这一点,你可能想尝试把代码放在元素被引用之后。我相信这会起作用。

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

如果需要添加类的身体,我肯定会使用$(文件)。就绪()。

+0

所以,如果我让你正确,你说元素在关闭之前不存在。那是对的吗? – 2008-10-27 21:22:17

+0

我在说这是最安全的方法。我会假设,因为元素可能没有完全指定(缺少结束标记),所以浏览器在完全解析之前不会将其添加到DOM。不过,我不能指出执行此标准的标准。 – tvanfosson 2008-10-27 21:46:01

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()发生时适用。

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

0

这是非常有帮助的。

放一点现实世界中的问题。

我建立在假设的JavaScript不支持,然后使用JavaScript重写。问题是,当我必须等待DOM加载之前,我的覆盖踢在网站经历闪烁阶段,因为它的内置。我希望如果我可以在网站加载的其他部分之前向body元素添加一个“活动”类,我将能够在页面呈现之前应用JavaScript假定的样式。

我不想做的就是添加这个,然后得到一个呼叫时Firefox4出来,我不应该这样做了。

如果你看看一个网站,我建,你会看到,它缓慢下降,但菲克尔困扰我(尤其是广告挂在网站上)。我可以把其他人的做法和刚刚建立它与JS假设,但来的 - 这只是偷懒......

1

基本上,答案是否定的。在IE6和Firefox 2(我最有经验的浏览器)中,直到关闭标签(或页面完成呈现,对于无效的XHTML)之后,该元素才会在DOM中。我知道jQuery提供了一种便利的方法,它似乎能够在大多数情况下迅速做出反应以避免“闪烁”。你会这样使用它:

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

但这就是关于它的JavaScript。

当然,在你提供的例子,你可以很容易地只达到相同的效果有:

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

,而不是添加类到您<身体>标签,你可能会发现更容易做一个类添加到<HTML>标签:

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