JavaScript里面的那些宽宽高高XXYY

写在最前面

通常这些API我们接触不到，一旦碰到就有点丈二的和尚。平时在做一些平面设计时才有肯能用到，比如摩客
另外在了解以及测试这些API时，有的情况可能没有考虑进去，有疑问的可以提出来一起探讨或者自测一下。

width & height

因为盒模型之间的差异，我这里使用的contentWidth，contentHeight，避免大家混淆。Are U OK？

测试用例

*{
  padding: 0;
  margin: 0;
}
#div{
  background-color: red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  /* box-sizing: border-box; */
}

<div id="div"></div>

let div = document.querySelector("#div")
console.log(div.scrollWidth)
console.log(div.offsetWidth)
console.log(div.clientWidth)

client

clientWidth = contentWidth + 左右padding
clientHeigh = contentHeight + 上下padding

offset

offsetWidth = contentWidth + 左右padding + 左右boder
offsetHeith = contentHeight + 上下padding + 上下boder

scroll

scrollWidth = contentWidth + 左右padding
scrollHeigh = contentHeight + 上下padding

top & left

测试用例

#div{
  background-color: red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  overflow-x: auto;
  /* box-sizing: border-box; */
}

<div id="div">
  <div style="width:200px;height: 100px;background-color: aqua;"></div>
</div>

let div = document.querySelector("#div")
function handleClick() {
  console.log(div.scrollLeft)
  console.log(div.clientLeft)
  console.log(div.offsetLeft)
}
document.onclick = handleClick

offsetTop & offsetLeft

元素到offsetParent的距离(元素的外缘父元素内壁的距离,元素外缘不包含margin)
offsetParent：距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body。

clientTop & clientLeft

即与border对应的宽度

scrollTop & scrollLeft

元素滚动条被拉动的距离

document.documentElement.scrollTop                标准浏览器滚动条上顶部滚过的距离
document.body.scrollTop                        IE浏览器滚动条上顶部滚过的距离

X & Y

测试用例

其余代码同上

let div = document.querySelector("#div")
function handleClick(e) {
  console.log(e.clientY)
  console.log(e.offsetY)
  console.log(e.screenY)
  console.log(e.pageY)
}
document.onclick = handleClick

clientX & clientY

鼠标在事件触发时相对于可视窗口的坐标，不会随着滚动条滚动而改变

offsetX & offsetY

鼠标在 当前事件触发的元素上的坐标 （内容区左上角为0，0）

screenX & screenY

鼠标相对于显示器屏幕的左上角的坐标

pageX & pageY

鼠标相对于浏览器（览器的有效区域,即不包含书签栏那部分）左上角的坐标，会随着滚动条滚动而改变；