浏览器css加载和事件触发之间的关系

最新推荐文章于 2021-12-21 15:15:53 发布

转载最新推荐文章于 2021-12-21 15:15:53 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a7fb0285188257a6d637ba8

文章标签：

#javascript #ViewUI

本文探讨了浏览器DOMContentLoaded事件触发机制与CSS加载之间的关系。通过实际示例说明，在DOMContentLoaded事件触发时，即使CSS尚未完全加载，也可以通过特定方法如Element.getBoundingClientRect()来激活CSS3动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结论

浏览器DOMContentLoaded事件触发和css是否加载完成是没有关系的。我们要获取到css属性必须使用Element.getBoundingClientRect()或者Window.getComputedStyle()等方法去获取元素的css值，你也可以用其他方式去获取元素的css值，都会去触发主动计算元素的css值。从而生效css3动画。

分析

我们一直习惯把css放在最前面，把js放在文档的最后面。可是发现有一个现象就是我们这样做之后，我们在ready事件，其实也就是检测DOMContentLoaded事件的时候去访问css的属性是访问不到的。我们必须要主动去调用

css没有加载完就直接设置元素属性执行的例子,这里的动画并没有生效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test {
            width: 200px;
            height: 200px;
            transition: height 2s;
            background-color: red;
        }
        .height {
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="test">

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function (e) {
            var $test = document.querySelector('.test');
            $test.className += ' height';
        });
    </script>
</body>
</html>
复制代码

使用Element.getBoundingClientRect()使动画生效的例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test {
            width: 200px;
            height: 200px;
            transition: height 2s;
            background-color: red;
        }
        .height {
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="test">

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function (e) {
            var $test = document.querySelector('.test');
            $test.getBoundingClientRect();
            $test.className += ' height';
        });
    </script>
</body>
</html>
复制代码