JS获取元素位置及大小

徐日良
1,383 阅读3分钟

浏览器的宽高

  • window.innerHeight为浏览器视口（vh）的高度，包含底部的横向滚动条
  • window.innerWidth为浏览器视口（vw）的宽度，包含右侧的垂直滚动条
  • window.outHeight为浏览器的整个高度，包含菜单栏，地址栏，标题栏等
  • window.outerWidth为浏览器的整个宽度，包括侧边栏、窗口镶边和调正窗口大小的边框等 image.png

获取元素的宽高及位置信息

clientWidth和clientHeight

image.png

  • 内联布局盒子的元素为0
<span id="inline">inline span</span>
document.getElementById("inline").clientWidth // output: 0
  • ELement.clientWidth = 内部width + 左右padding 不包括垂直滚动条、边框和外边距
  • Element.clientHeight = 内部height + 上下padding 表示元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距
#b1{
  padding: 10px;
  width: 100px;
  height: 100px;
  border: 5px solid red;
  background: black;
  box-sizing: border-box;
}

<div id="b1">block</div>

const elem = document.getElementById("b1");
console.log(elem.clientWidth) // output 90 (需要减去border的宽度）
console.log(elem.clientHeight) // output 90 (需要减去border的高度）
  • HTMLElement.clientLeft相当于border-left的宽度
  • HTMLElement.clientTop相当于border-top的宽度

offsetWidth和offsetHeight

image.png

  • 和clientWidth和clientHeight不同的是，offsetWidth和offsetHeight也可以获取内联布局的宽度和高度
<span id="inline">inline</span>
console.log(document.getElementById("inline").offsetWidth) //output 42
  • HTMLElement.offsetWidth返回一个元素的布局宽度，包含border、padding、右侧垂直滚动条的宽度
  • HTMLElement.offsetHeight返回一个元素的布局高度，包含border、padding、底部横向滚动条的高度

offsetTop、offsetLeft、offsetParent

  • HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的
  • HTMLElement.offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
  • HTMLElement.offsetTop返回当前元素相对于其 HTMLElement.offsetParent 元素的顶部内边距的距离。

getBoundingClientRect

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

// left、top、right、bottom、width、height、x 、 y的 DOMRect 对象
var rect = element.getBoundingClientRect();

image.png

需要注意的是它们的值是相对于视口的，而不是绝对的。当滚动位置发生了改变，top和left属性值就会随之立即发生变化。

#t1{
    margin-top: 100vh;
    margin-left: 100vw;
    width: 100px;
    background: red;
}
//当滚动条位置发送改变时，计算出来的top和left也和发送改变。
console.log(document.getElementById("t1").getBoundingClientRect())

Window.getComputedStyle()

和通过style获取对应的属性值效果一致，唯一的区别是通过getComputedStyle是只读的。

事件中的相关属性

  • clientX、clientY返回触点相对于可见视区左边沿的的X和有坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.
  • pageX、pageY返回触点相对于HTML文档左边沿的的X和y坐标. 和clientX、clientY属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了浏览器水平滚动的偏移.
  • screenX|screenY返回触点相对于屏幕左边沿的的X、y坐标. 不包含页面滚动的偏移量.
  • offsetX|offsetY事件对象与目标节点的内填充边（padding edge）在 X 轴y方向上的偏移量。
  • x为clientX的简写，y为clientY的简写。

image.png 图片来自网络 www.cnblogs.com/1906859953L…

avatar
文章
阅读
粉丝