web前端-client 属性

client

1. Element.clientWidth
   1.1 Element.clientWidth = 内容宽度 + 内边距的宽度(padding), 不包含外边距, 滚动条和边框的宽度

2. Element.clientHeight 和Element.clientHeight同理

3. Element.clientLeft 表示左边边框的宽度, 不包括左边外边距和内边距.

4. Element.clientTop 表示顶部边框的宽度, 不包括顶部外边距和内边距.

借用一张图来说明:

盒子图

offset

1. 与 offset 相关的属性都是只读的.
2. HTMLElement.offsetWidth 表示盒子的宽度, 包含内容宽度, 内边距和边框宽度
3. HTMLElement.offsetHeight 表示盒子高度, 包含内容高度, 内边距和变宽高度.
4. HTMLElement.offsetLeft 表示当前元素最上角相对于HTMLElement.offsetParent 节点的左边距的偏移的像素值.
5. HTMLElement.offsetTop 表示当前元素的左上角相对于HTMLElement.offsetParent 节点的上边距的偏移的像素值.
6. HTMLElement.offsetParent 该节点的最近的具有定位属性的父节点, 如果没有, 则继续向上找, 如果都没找到, 则 body 就是offsetParent, 在标准模式下是:html, quirks下是:body, 当元素 style.display = 'none'; 的时候, 则 offsetParent则返回 null, 如果当前元素的position : fixed; 则 offsetParent 返回null.

scroll

1. scrollHeight 表示内容高度, 当有垂直滚动条的时候, 也包含隐藏的内容的部分, 还包括内边距.
2. scrollWidth 表示内容宽度, 当有水平滚动条的时候, 也包含隐藏的内容的部分, 还包含边框.
3. scrollTop 表示垂直方向上滚动的距离 . 元素顶部距离容器顶部的距离.
4. scrollLeft 表示水平方向上的滚动距离 . 元素左侧距离容器左侧的距离.