JavaScript：元素偏移量offset、元素可视区 client、立即执行函数、scroll滚动距离、mouse enter和mouse over的区别

本文链接：https://blog.csdn.net/MDR_0820/article/details/120968510

本文介绍了JavaScript中用于元素定位和尺寸获取的offset, client和scroll系列属性，包括offsetTop、offsetLeft、clientWidth、clientHeight以及scrollTop、scrollLeft等。通过实例代码展示了如何动态获取元素的位置、大小和滚动距离，并对比了它们之间的主要用途。此外，还探讨了mouseenter和mouseover事件的区别。

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

offset

offset 翻译就是偏移量我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）大小等
常用属性

代码展示

// CSS
 .father{
            width: 200px;
            height: 200px;
            margin: 200px;;
            background-color: skyblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin-left: 50px;
        }
        .w{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin-left: 200px;
            padding:10px;
            border: 5px solid skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        var w = document.querySelector('.w')
        // offsetTop 可以得到元素的偏移 位置 返回的是不带单位的数值
        console.log(father.offsetTop);  // 200  

         // 它以带有定位的父级为准 如果没有父级或父级没有定位则返回的是以 body为准
         // 要先清楚内外边距 否则会把边距也计算在内
        console.log(son.offsetLeft); // 返回的是  250 、如果没有清除边距则返回的    是 258

    // 可以得到元素的大小 宽度和高度  包含 padding + border + width
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
  // 返回带有定位的父级 否则返回body
        console.log(son.offsetParent); // 父级无定位 返回 body
        console.log(son.parentNode); // 返回 父级 最近一级的父级 不管有没有定位
     </script>
</body>

在这里插入图片描述

元素可视区 client

client 翻译为客户端我们使用client系列的相关属性获取元素可视区的相关信息通过client的相关属性可以动态的得到该元素的边框大小等
在这里插入图片描述

立即执行函数（function(){}）（）

立即执行函数（function(){}）（）
主要作用：创建一个独立的作用域里面所有的变量都是局部变量不会有命名冲突的情况

<script>
        // 函数不调用 自己不执行 这个写法必须要调用
        function fn(){
            console.log(1);
        }
        fn();
        // 1.立即执行函数 并不需要调用 可以直接输出  也可以传递参数
        (function() {    //  形参
            console.log(1);
        })() ; //实参

        (function(a ,b) {    //  形参
            console.log(a+b);
        })(1,2);  //实参

        // 另一种立即执行写法（function(){}  （））
        (function(){
            console.log(4);
            var nam = 10
        }());

        (function nan(b,c){   //可以起一个名字 不会报错
            console.log(b+c);
            var nam=10
        }(2,3))

    </script>