原生JavaScript
clientHeight/Width:
Element.clientHeight==>元素包括padding的高度,不包括滚动条
Element.clientWidth==>元素包括padding的宽度,不包括滚动条
document.body/documentElement.clientWidth/Height==>:代表视口的宽高
scrollHeight/With:
Element.scrollHeight/With==>元素内容包括可滚动的宽高
document.body/documentElement.scrollHeight/Width==>文档的宽高
scrollTop/Left:
Element.scrollTop/Left==>元素滚动条的位置
document.doby/documentElement.scrollTop/Left==>文档滚动条的位置
原生JavaScript只能获取元素相对于最近定位祖先元素(offsetParent
)的偏移:
Element.offsetTop/Left
getBoundingClientRects()方法
该返回元素的大小及相对于视口的位置
大小的含义:包含border+padding+content
的大小
位置的含义:top,left包含margin;bottom,right不包含margin(不明白可以测试一下)
jQuery中关于宽高和偏移:
宽高:
height(),width()==>获取元素的内容的宽高值,
$(window).height():返回视口的高度
$(document).height():返回文档的高度
innerHeight(),innerWidth()==>获取元素包括padding的宽高值,不适用于window和document
outerHeight(),outerWidth()==>获取元素包括Margin的宽高值,不适用于window和document
偏移:
position()==>获取相对于最近定位祖先元素的偏移(返回一个包括left、top属性的对象)
offset()==>获取相对于文档的偏移(返回一个包括left、top属性的对象)
scrollLeft()==>获取元素水平滚动条的位置
scrollTop()==>获取元素垂直滚动条的位置