三个js获取对象的大小 - Javascript

在web开发中，获取DOM元素的大小是一项非常基础的操作。这篇文章将介绍三个JS获取对象大小的方法。

1.使用offsetWidth和offsetHeight属性

offsetWidth和offsetHeight是DOM元素的属性，用于获取元素包括边框在内的宽度和高度。

const obj = document.getElementById('myObj');

console.log(`宽度：${obj.offsetWidth}px; 高度：${obj.offsetHeight}px`);

这段代码将获取ID为myObj的DOM元素的宽度和高度，注意要加上px。

2.使用getBoundingClientRect()方法

getBoundingClientRect()是DOM元素的方法，用于获取元素的大小及其相对于视口的位置。

const obj = document.getElementById('myObj');
const rect = obj.getBoundingClientRect();

console.log(`左上角坐标:(${rect.left}px,${rect.top}px); 宽度：${rect.width}px; 高度：${rect.height}px`);

这段代码将获取ID为myObj的DOM元素的左上角坐标和宽高。

3.使用getComputedStyle()方法

getComputedStyle()是window对象的方法，用于获取元素的所有样式属性。

const obj = document.getElementById('myObj');
const style = window.getComputedStyle(obj);

console.log(`宽度：${style.width}; 高度：${style.height}`);

这段代码将获取ID为myObj的DOM元素的宽度和高度，注意不要加上px。

以上就是三种获取DOM元素大小的方法。开发者可以根据具体需求选择适合的方法。