写在最前面
通常这些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
鼠标相对于浏览器(览器的有效区域,即不包含书签栏那部分)左上角的坐标,会随着滚动条滚动而改变;