DOM盒模型系列之JavaScript

DOM盒模型

1. client
2. offset
3. scroll

前置知识：

滚动条，滚动条会占据content的位置，例如：width=100，若有滚动条，则在浏览器上看到的实际content宽度为94.33333333

Client

一般情况下，Client包括 content 和 padding。

1. clientWidth：width + padding-left/right
2. clientHeight：height + padding-top/bottom
3. clientTop：border-top
4. clientLeft：border-left

clientWidth:
代表的是元素的内部宽度，包括 content 和 padding，不包括 border 和 margin。如果有滚动条的话，也不包含滚动条（但是滚动条的出现会占据content的一部分，从而content减小）。
clientHeight 同理

clientTop
代表的是元素内容区域的左上角相对于整个元素左上角的距离（不包括padding）
所以在一般情况下，clientTop的值即border-top的值。
clientLeft 同理

特别的：如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该clientLeft包括滚动条的宽度。