HTML定位：client, offset, scroll以及width, innerWidth, outerWidth, outerWidth(true) - noway55m/front-end-study GitHub Wiki

HTML 定位图

css content:
- style.width: 元素宽度，回传"XXpx"。(不包含：padding, border and scrollbar)
- style.height: 元素高度"XXpx"。(不包含：padding, border and scrollbar)
- style.pixelLeft: 一样，但回传整数值。(只能处理单位是pixel)
- style.posLeft: 一样，但回传整数值。(能处理不同单位)
client:
- clientWidth: 元素可视宽度(不包含元素的border和滚动条)
- clientHeight: 元素可视高度(不包含元素的border和滚动条)
- clientLeft: 与元素border一样，若元素未设定border则为0。
- clientTop: 与元素border一样，若元素未设定border则为0。

offset:
offsetWidth: 元素的可见宽度(包含：border和scroll bar)
offsetHeight: 元素的可见高度(包含：border和scroll bar)
offsetLeft: 元素相对于父元素(offsetParent)的水平位移。(从父元素的内部content开始，不包含border。)
offsetTop: 元素相对于父元素(offset parent)的垂直位移。(从父元素的内部content开始，不包含border。） ** offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 ** offsetTop 只读，而 style.top 可读写。 ** 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。