三大系列 ofset client scroll

一、offset 元素偏移

1. 获得元素到带有定位的父元素的距离
2. 获得元素自身大小
3. 返回的数值都不带单位

element.offsetParent : 返回该元素带有定位的父元素，没有就返回body
element.offsetTop : 返回元素相对带有定位父元素上方的偏移量
element.offsetLeft : 返回元素相对带有定位父元素左边的偏移量
element.offsetWidth : 返回元素宽度，padding+边框+内容
element.offsetHeight : 返回元素高度，padding+边框+内容

注意： offset

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

• offset 系列获得的数值是没有单位的

• offsetWidth 包含padding+border+width

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

style = 字符串 + ‘px’

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

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

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

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

• 所以，我们想要给元素更改值，则需要用style改变

二、client 元素可视区

element.clientTop : 返回元素上边框大小
element.clientLeft : 返回元素左边框大小
element.clientWidth : 元素padding+内容宽度，不含边框
element.clientHeight : 元素padding+内容高度，不含边框

三、 scroll 元素滚动

element.scrollTop : 元素被卷去的上侧距离，到上侧边框底部
element.scrollLeft : 元素被卷去的左侧距离，到上侧边框底部
element.scrollWidth : 元素自身实际宽度，不含边框
element.scrollHeight : 元素自身实际高度，不含边框

滚动事件： onscroll 拖动滚动条就触发
加滚动条： overflow:auto

四、立即执行函数

立即执行函数 (function(){})() 或者 (function(){}())
就是括号包起来，然后调用括号，括号前面省略的是window
作用是创建了一个独立的作用域

五、mouseover和mouseenter的区别

都是鼠标经过触发的事件，但 mouseenter 不冒泡，与 mouseleave 搭配使用