JS中为window添加DOMContentLoaded事件监听的小思考

最新推荐文章于 2024-03-02 12:01:56 发布

qq_51598480

最新推荐文章于 2024-03-02 12:01:56 发布

阅读量966

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_51598480/article/details/124443230

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        .new {
            height: 100px;
            width: 100px;
            margin: 100px auto;
            background-color: dodgerblue;
        }
        .box {
            height: 100px;
            width: 200px;
            margin: 100px auto;
            background-color: #ffe094;
            text-align: center;
        }

    </style>

    <script>
        /*此例可以看出
        * 在document还未给标签元素添加css样式时,DOMContentLoaded监听函数已触发
        * 且该函数为其中元素添加样式后,之后的document加载css时便不会再为该标签元素添加原定的样式
        * 而以该函数中的className为标准
        * 猜测：document在加载css样式时会先判断className是否为空,若空则添加document中原定的class=''box''的样式
        * 若不为空则不添加，此处不为空(为监听函数中定义的className)
        * 猜测用途：可让某一标签元素的样式加载手动加快,放到该监听函数中
        * */
        window.addEventListener('DOMContentLoaded', function () {
            var box = document.querySelector('.box');
            box.className = 'new';
        })
    </script>
</head>
<body>
    <div class="box">加载</div>
</body>
</html>

刚学到,突然有这个想法,测试了一下。

qq_51598480

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中为window添加DOMContentLoaded事件监听的小思考

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .new { height: 100px; width: 100px; margin: 100.
复制链接

扫一扫