Web前端学习JS篇之“特效”

本次分享JS做出的简单特效

---

特效系列之offset（动态得到元素的位置和大小，返回的值不带单位）

element.offsetParent：返回带有定位的父元素，父无定位则返回body

element.offsetTop：返回带定位父元素上方的偏移

element.offsetLeft：返回带定位父元素左边框的偏移

element.offsetWidth：返回自身包括padding、边框、内容区的宽度

element.offsetHeight：返回自身包括padding、边框、内容区的高度

offset（适合获取）和style（适合改变）的区别：

style只能得到行内样式（也就是直接卸载div里的样式）

style获得的有单位

style.width不包含padding和border

style可读可写，offset只读

---

特效系列之client（返回值不带单位）

element.clientTop:返回元素上边框的大小

element.clientLeft:返回元素左边框的大小

element.clientWidth:返回自身包括padding和内容区，不含边框

element.clientHeight:返回自身包括padding和内容区，不含边框

---

立即执行函数：

不需要调用就能立即执行的函数，最大的作用就是独立创建了一个作用域，所有的变量都是局部变量

写法是：（function（a,b）{}）（1,2）

或者是：（function（）{} （））

---

特效系列之scroll(返回值不带单位)

element.scrollTop:返回被卷去的上侧距离

element.scrollLeft:返回被卷去的左侧距离

element.scrollWidth:返回自身实际宽度，不含边框

element.scrollHeight:返回自身实际高度，不含边框

onscroll事件：