js 获取元素宽高(使用JS获取元素的尺寸)

什么是元素的尺寸

元素的尺寸指的是元素在网页中所占据的宽度和高度，通常用像素（px）作为单位。

在前端开发中，获取元素的尺寸是非常常见的操作，比如在布局时需要知道一个元素的宽度和高度，或者在处理图片时需要知道图片的实际大小等。

使用JS获取元素的宽度和高度

在JS中获取元素的宽度和高度主要有两种方式，分别是使用offsetWidth/Height属性和使用getBoundingClientRect()方法。

使用offsetWidth/Height属性获取元素的尺寸

offsetWidth/Height属性可以获取一个元素的实际宽度和高度，包括元素的边框(border)、内边距(padding)和实际内容大小。

它的使用方法为：

var width = element.offsetWidth;

var height = element.offsetHeight;

其中，element为要获取尺寸的元素。

需要注意的是，offsetWidth/Height属性获取的尺寸值不包括外边距(margin)的大小。

使用getBoundingClientRect()方法获取元素的尺寸

getBoundingClientRect()方法可以获取一个元素相对于视口(viewport)的位置信息和尺寸信息，包括元素的左上角的x、y坐标及元素的宽度和高度。

它的使用方法为：

var rect = element.getBoundingClientRect();

其中，element为要获取尺寸的元素。

getBoundingClientRect()方法返回的是一个DOMRect对象，它包括left、top、right、bottom、width、height等属性。

需要注意的是，getBoundingClientRect()方法返回的尺寸值包括了元素的边框、内边距和实际内容大小，但不包括外边距的大小。

注意事项

在使用以上两种方法获取元素的尺寸时，需要注意以下几点：

获取元素的尺寸必须在元素渲染完成后才能获取到，否则会返回0。

获取包含图片等异步加载的元素的尺寸时，需要等待图片加载完成后才能获取到正确的尺寸。

获取与CSS样式相关的元素尺寸时，需要注意元素的盒模型(box-sizing)属性，不同的盒模型会影响元素的尺寸计算。

总结

获取元素的尺寸是前端开发中经常用到的操作，可以使用offsetWidth/Height属性和getBoundingClientRect()方法来获取元素的宽度和高度。

要注意获取元素尺寸的时机以及与盒模型相关的属性，才能准确获取到元素的尺寸信息。