在DOM准备好之前附加类

时间:2015-02-04 05:22:20

标签: javascript html css

我在页面上有一个导航元素,我在DOMContentLoaded之前使用DOM API创建。它可以展开或折叠。因为我在DOM准备好之前创建它并附加所有相关的类,所以当我最终将它附加到父节点时,这些类已经存在。

我的问题是,是否可以使用body元素(在DOMContentLoad事件之前为其附加样式)。

我想这样做的原因是因为当类被添加到body元素时,我的CSS3过渡中存在一个可视化工件,所以如果可能的话,我希望事先将类放在那里。

1 个答案:

答案 0 :(得分:1)

当且仅当您的脚本位于<body>标记的开头之后时,才可以在DOMContentLoaded事件之前将类附加到<body>元素。这里最重要的是你的剧本的位置。

所以,这样可行:

<body>
<script>
document.body.className += " foo";
</script>
other HTML here
</body>

脚本按顺序执行,当脚本运行时,DOM <script>标记之前的元素将在DOM中就位。 DOMContentLoaded事件意味着整个DOM已完成解析。这并不意味着您无法访问已经解析过的内容。

<head>部分,您还可以通过修改始终可用的<html>document.documentElement标记添加课程。如果它只是一个您想要触发的父CSS选择器,这通常与将该类放在<body>标签上一样。


仅供参考,避免闪烁或临时显示未完成对象的常见解决方法是将这些对象指定为在CSS中不可见,以便页面开始渲染这些对象尚不可见。

然后,您的脚本运行并修改这些对象上的对象,样式或类,然后您的脚本所做的最后一件事就是使对象可见,这样它们只有在最终形式时才会在屏幕上绘制(之后)你的脚本修改了它们。)