元素偏移量offset系列
该系列相关属性可以动态地得到该元素地位置(偏移)、大小等。
- 获得元素距离带有定位父元素的位置
- 获取元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
常用属性
注意没有right和bottom。
以父元素为准父元素一定要带有定位,若不带有定位或没有父亲则以body为准。
鼠标在页面中的坐标:e.pagex、e.pageY
offset与style区别
元素可视区client系列
用来获取元素可视区的相关信息。通过该系列的相关属性可以动态地得到该元素的边框大小、元素大小等。
常用属性
拓展:立即执行函数
立即执行函数不需要调用立马能够自己执行的函数。主要作用是创建一个独立的作用域(内部所有变量都是局部变量,不会有命名冲突的情况)
写法:(function(①){})(②) 、 (function(①){}(②))
第一种写法中的②号括号可以看作是调用函数,在里面写入参数可以传递给函数。
第二种写法中的②号括号是同样的作用。
立即执行函数之间用分号隔开。
元素滚动scroll系列
使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等(页面滚动距离通过window.pageXOffset获得)。
常用属性
自身实际大小即内容大小,包含超出的部分。
如果觉得浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏的高度就是被卷去的头部。
滚动条在滚动时会触发 scroll事件。
总结