【前端】JavaScript-PC端网页特效

目录

一、元素偏移量offset系列

1.1offset概述

 1.2offset与style区别

二、元素可视区client系列

 立即执行函数

三、元素滚动scroll系列

 三大系列总结

 mouseenter和mouseover的区别

---

一、元素偏移量offset系列

1.1offset概述

offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素得位置
• 获得元素自身的大小（宽度高度）
• 注意：返回得数值都不带单位

offset系列常用属性：

 1.2offset与style区别

• offset可以得到任意样式表中的样式值，.style只能得到行内样式表中的样式值
• offset系列获得的数值是没有单位的，.style.width获得的是带有单位的字符串
• offsetWidth包含padding+border+width，.style.width获得不包含padding和border的值
• offsetWidth等属性是只读属性，只能获取不能赋值，.style.width是可读属性，可以获取也可以赋值
• offset更适合用于获取元素大小位置，.style.width更适合用于给元素更改值

二、元素可视区client系列

client系列的相关属性来动态获取元素可视区的相关信息

 立即执行函数

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

        // 第一种写法
        (function (形参) { 
        //函数体
        })(实参);
        // 第二种写法
        (function (形参) {
        //函数体
         }(实参));

作用：创建一个独立的作用域，避免了命名 冲突问题。

三、元素滚动scroll系列

scroll系列的相关属性可以动态的得到元素的大小，滚动距离等。

 三大系列总结

 mouseenter和mouseover的区别

 mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只经过自身盒子触发。