JavaScript学习手册（25）

Posted 2021-05-14 designbyly

元素偏移量offset系列

可以动态的得到该元素的位置（偏移），大小等。

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

常见属性

1. element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
2. element.offsetTop 返回元素相对带有定位父元素上方的偏移
3. element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
4. element.offsetWidth 返回自身包括padding，边框，内容区的宽度，返回数值不带单位
5. element.offsetHeight 返回自身包括padding，边框，内容区高度，返回数值不带单位

offset与style的区别

1. offset （获取元素大小位置）

   可以得到任意样式表中的样式值

   获得的数值没有单位

   offsetWidth包含padding+border+width

   offsetWidth等属性只是只读属性，只能获取不能赋值

2. style （元素更改值）

   只能得到行内样式表中的样式值

   style.width获得的1是带有单位的字符串

   style.width获得不包含padding和border的值

   style.width是可读写属性，可以获取也可以赋值

元素可视区client系列

可以动态的得到该元素的边框大小，元素大小等。

常见属性。

1. element.clientTop 返回元素上边框的大小
2. element.clientLeft 返回元素左边框的大小
3. element.clientWidth 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
4. element.clientHeight 返回自身包括padding，内容区的高度，不含边框，返回数值不带单位

立即执行函数：

• 不需要调用，立马自己进行执行的函数
• 写法：（function（）{}) () (function(){}())
• 独立创建了一个作用域，里面变量都是局部变量，不会有命名冲突的情况。

pageshow事件

在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，此事件会在load事件触发后触发，根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件

注意：此事件是给window添加

元素滚动scroll系列

可以动态的得到该元素的大小，滚动距离等

常见属性

• element.scrollTop 返回被卷上去的上侧距离，返回数值不带单位
• element.scrollLeft 返回被卷上去的左侧距离，返回数值不带单位
• element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
• element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位

页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscrool事件。

mouseenter和mouseover的区别

1. 当鼠标移动到元素上时就会触发mouseenter事件。
2. 类似于mouseover
3. mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
4. mouseenter不会冒泡
5. 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

封装简单动画函数

**动画实现原理：**通过定时器setInterval（）不断移动盒子位置

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

• 动画函数简单封装
• 动画函数给不同元素记录不同定时器
• 如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）
• 核心原理：利用JS给当前对象添加属性

**缓动效果原理：**缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法：（目标值-现在的位置）/10 做为每次移动的距离步长。
3. 停止的条件：让当前盒子位置等于目标位置就停止定时器。

动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个参数里面，当那个函数执行完毕之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置

动画

每日一句
真诚是美酒，年份越久越醇香浓型；真诚是焰火，在高处绽放才愈是美丽；真诚是鲜花，送之于人手有余香。