clientWidth/clientHeight
对象内容的可视区的宽度(不包含被隐藏内容),不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth/offsetHeight
对象内容的可视区的宽度(不包含被隐藏内容),包滚动条等边线,会随对象显示大小的变化而改变。
备注: offsetWidth/offsetHeight >= clientWidth/clientHeight
scrollWidth/scrollHeight
对象的实际内容的宽度(包含滚动隐藏内容),不包边线宽度,会随对象中内容超过可视区后而变大。
innerWidth/innerHeight
window.innerHeight = 浏览器窗口的可视区域高度(不包含浏览器状态栏) window.innerWidth = 浏览器窗口的可视区域宽度(不包含浏览器状态栏)
outerWidth/outerHeight
window.outerHeight = 浏览器窗口高度(包含浏览器状态栏) window.outerWidth = 浏览器窗口宽度(包含浏览器状态栏)
offsetTop/offsetLeft
offsetLeft
指的是元素左侧偏移offsetParent
的距离,同理offsetTop
指的是上侧偏移的距离。
offsetParent
指的是距该元素最近的position
不为static的祖先元素,如果没有则指向body
元素
scrollTop/scrollLeft
如果元素不能被滚动,则为0。可视区域顶部 到 实际内容层顶部的距离。
clientTop/clientLeft
clientTop = boder.top(上边框的宽度) clientLeft = boder.left(左边框的宽度)