盘点几个计算dom的属性和方法

Element.getBoundingClientRect()

描述:获取当前元素的矩阵区域, 返回元素的大小及其相对于视口的位置

返回值是一个 DOMRect 对象

使用

  1. 获取到当前元素到窗口的距离
1
2
3
4
5
const rect = document.getElementById("app").getBoundingClientRect();
rect.top // 元素起点纵坐标到视口顶部的距离
rect.bottom // 元素底部(起点纵坐标+高度)到视口顶部的距离
rect.left // 元素起点横坐标到视口左侧的距离
rect.right // 元素右部(起点横坐标+宽度)到视口左侧的距离

image.png)image.png

  1. 获取当前元素的大小
1
2
rect.width // 元素的宽度
rect.height // 元素的高度
  1. 获取当前元素的起始坐标
1
2
rect.x // 起始横坐标
rect.y // 起始纵坐标

场景

获取一个坐标是否落在了当前元素上

1
2
3
4
5
6
7
8
9
10
function checkIntoRectByPoint(element, x, y){
const rect = element.getBoundingClientRect();
if(
x > rect.x && x < rect.x + rect.width &&
y > rect.y && y < rect.y + rect.height
){
return true;
}
return false;
}

Window.getComputedStyle()

描述:获取当前元素计算后的所有 css 属性值。

使用

1
window.getComputedStyle(element,pseudoElt)

注:pseudoElt,指定一个要匹配的伪元素的字符串。必须对普通元素省略(或 null )

场景

可以用来计算的属性:padding、margin、top、bottom、left、right、width、height、lineHight

offsetXxx 系列

属性 描述
offsetTop 当前元素相对于其 offsetParent 元素的顶部内边距的距离
offsetLeft 当前元素的左外边框至offsetParent元素的左内边框之间的像素距离
offsetHeight 表示元素在水平方向上占用的空间大小,无单位(以像素px计)
offsetWidth 返回当前元素 左上角 相对于 offsetParent 节点的左边界偏移的像素值

image.png

留两个小问题:为什么没有 offsetBottom 和 offsetRight

offsetParent

HTMLElement.offsetParent 返回指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。

ps:这段概念包含了非常多的关键词,用词的精准,由于有些特殊场景我还没有用到,所以需要下面再扣一扣字眼,除概念外还有其他需要思考和注意的点,打算后面单独整理一篇 offsetXxx 系列。

document.elementFromPoint()

这个API我记不清哪位大佬分享过来着,我跟他学了一手

一个可以扩展你思路的API - 前端

原创技术分享,您的支持将鼓励我继续创作