我想在DOM加载之前向body标签添加一个类,但我想知道以下方法是否有效。现在我更关心的是其有效性,而不是浏览器是否支持它。
感谢您,史蒂夫。
<body>
$("body").addClass("active");
...
</body>
感谢您,史蒂夫。
<body>
$("body").addClass("active");
...
</body>
<body>
<div id='topStories'></div>
<script type='text/javascript'>
$('div#topStories').addClass('active');
</script>
</body>
简短回答:这要看情况。根据我的测试,答案似乎是肯定的,具体取决于你想要什么。我刚刚测试了这个:
<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>
alert()
触发时,值被正确设置,但样式尚未应用(在DOM完成加载后会快速应用)。alert()
触发时已经应用。.elementReady()插件似乎非常接近您所寻找的东西。
它通过使用setInterval
循环来操作,一旦document.getElementById()
返回给定id
的元素,就会退出。
你可能可以对该插件进行轻微修改(或提交更新/补丁),以允许使用通用选择器(至少针对“tagNames”)而不仅仅是id
。
我不认为有任何真正可靠的跨浏览器兼容方法可以在加载之前访问元素 - 除了这种类型的setInterval
黑客方法
除非您能够像@JasonBunting建议的那样将javascript命令放置在目标元素内部。
<script>
$(document).ready(function() {
$("body").addClass("active");
});
</script>
<body>
..
..
..
</body>
但这大概就是 JavaScript 的全部了。
当然,在您提供的示例中,您可以轻松地使用以下方式实现相同的效果:
<body class="active">
</body>
不必将类添加到您的 <body> 标签中,您可能会发现将类添加到 <html> 标签更容易,方法如下:
<script type="text/javascript">
document.documentElement.className = 'active';
</script>
非常有帮助。
为了让问题更具现实意义。
我建立在 JavaScript 不被支持的假设上,然后用 JavaScript 覆盖。问题是,当我必须等待 DOM 加载完成才能启动我的覆盖时,网站会经历闪烁阶段,因为它正在构建中。我希望如果我能在其余部分加载之前向 body 元素添加一个 "active" 类,我就能在页面呈现之前应用 JavaScript 假定的样式。
我不想这样做,然后在 Firefox4 推出时接到电话说我不应该这样做。
如果你看一下我建立的网站,你会发现它优雅地降级,但那个闪烁令我困扰(特别是如果广告挂起了网站)。我可以采取其他人的方法,只是用 JS 假定构建,但拜托 - 那只是懒惰...