offset元素偏移量

获取元素距离带有定位父元素的位置

获取元素自身的大小(宽度高度)

返回的数组不带单位

offset常用属性

element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位则返回body

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

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

element.offsetWidth 返回自身包括padding 边框,内容区的宽度,返回值不带单位

element.offsetHeight 返回自身包括padding 边框,内容区的高度,返回值不带单位

offset与style的区别

style只能获取行内样式表中的样式值

style获取的是带有单位的字符串(offset数字型的不带单位)

style不包含padding和border值

offset是只读属性 style可以获取也可以赋值

所以 我们想要获取元素大小位置用offset 给元素更改值用style

元素可视区client系列

client翻译过来是客户端,我们使用client的相关属性获取元素可视区的相关信息,通过client系列的相关属性可以动态得到该元素的边框大小,元素大小等

与offsetWidth最大的区别是不包含边框

client常用属性

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

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

element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回值不带单位

element.clientHeight 返回自身包括padding,内容区的高度,不含边框,返回值不带单位

scroll系列

    scroll事件当我们滚动条发生变化的时候会触发事件

scroll常用属性

scroll翻译过来是滚动的,我们用scroll系列的相关属性可以动态的的到该元素的大小,滚动距离等

element.scrollTop 返回被卷去上侧的距离,返回值不带单位

element.scrollLeft 返回被卷去左侧的距离,返回值不带单位

element.scrollWidth 返回自身的实际宽度 不含边框返回值不带单位

element.scrollHeight 返回自身的实际高度 不含边框返回值不带单位

三大系列总结

element,offsetWidth 返回自身包括padding边框内容区的高度,返回值不带单位

element,clientWidth 返回自身包括padding 内容区的高度,不含边框返回值不带单位

element.scrollWidth 返回自身实际高度,不含边框返回值不带单位

• offset系列经常用于获取元素位置
• client经常用来获取元素大小
• scroll用于获取滚动距离

页面的滚动通过window.pagexoffset获取

offset系列包含了border其他两个不包含而scroll包含了超出部分

扩展

用于获取某个元素相对于视窗的位置集合,集合中top,right,bottom,left等属性

 rectobject=ele.getBoundingClientRct()

rectobject.top元素上边到视窗上边的距离

rectobject.right元素右边到视窗左边的距离

rectobject.bottom元素下边到视窗上边的距离

rectobject.left元素左边到视窗左边的距离