client
Element.clientWidth
1.1Element.clientWidth= 内容宽度 + 内边距的宽度(padding), 不包含外边距, 滚动条和边框的宽度Element.clientHeight和Element.clientHeight同理Element.clientLeft表示左边边框的宽度, 不包括左边外边距和内边距.Element.clientTop表示顶部边框的宽度, 不包括顶部外边距和内边距.
借用一张图来说明:
盒子图
offset
- 与 offset 相关的属性都是只读的.
-
HTMLElement.offsetWidth表示盒子的宽度, 包含内容宽度, 内边距和边框宽度 -
HTMLElement.offsetHeight表示盒子高度, 包含内容高度, 内边距和变宽高度. -
HTMLElement.offsetLeft表示当前元素最上角相对于HTMLElement.offsetParent节点的左边距的偏移的像素值. -
HTMLElement.offsetTop表示当前元素的左上角相对于HTMLElement.offsetParent节点的上边距的偏移的像素值. -
HTMLElement.offsetParent该节点的最近的具有定位属性的父节点, 如果没有, 则继续向上找, 如果都没找到, 则 body 就是offsetParent, 在标准模式下是:html, quirks下是:body, 当元素 style.display = 'none'; 的时候, 则offsetParent则返回null, 如果当前元素的position : fixed; 则 offsetParent 返回null.
scroll
-
scrollHeight表示内容高度, 当有垂直滚动条的时候, 也包含隐藏的内容的部分, 还包括内边距. -
scrollWidth表示内容宽度, 当有水平滚动条的时候, 也包含隐藏的内容的部分, 还包含边框. -
scrollTop表示垂直方向上滚动的距离 . 元素顶部距离容器顶部的距离. -
scrollLeft表示水平方向上的滚动距离 . 元素左侧距离容器左侧的距离.
