JavaScript里面的那些宽宽高高XXYY

时间:2021-1-18 作者:admin

写在最前面

通常这些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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。