clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight

614

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(左边框的宽度)