元素可视区 client系列

最新推荐文章于 2025-06-29 14:50:14 发布

原创最新推荐文章于 2025-06-29 14:50:14 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文探讨了clientWidth与offsetWidth的区别，通过示例代码详细解释了clientWidth不包括元素边框的特点，并介绍了立即执行函数的概念及其应用场景。

client

在这里插入图片描述
client 宽度和我们offsetWideth 最大的区别就是不包含边框

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
    <script>
        // client 宽度 和我们offsetWideth 最大的区别就是 不包含边框
        var div = document.querySelector('div');
        console.log(div.clientWidth); //220px
    </script>

立即执行函数

1.立即执行函数：不需要调用，立马能够自己执行的函数

function fn() {
            console.log(1);
        }
        fn();

2.写法也可以传递参数进来
(function() {})() 或者 (fucntion() {}());

        (function(a, b) {
            console.log(a + b);
            var num = 10; //局部变量
        })(1, 2); //第二个小括号 可以看做是调用函数

        (function sum(a, b) {
            console.log(a + b);
            var num = 10; //局部变量
        })

3.立即执行函数最大的作用就是 独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况