js获取元素宽高(JS获取元素尺寸，简单实用)

什么是元素尺寸

元素尺寸指的是一个HTML元素在屏幕上所占据的空间大小。在Web开发中，有时需要获取元素的尺寸信息以便于做一些操作，如响应式布局、计算元素的位置、设置元素样式等。

如何获取元素尺寸

在JavaScript中，可以使用两个属性获取元素的尺寸：clientWidth/clientHeight和offsetWidth/offsetHeight。

clientWidth/clientHeight属性表示元素内部的宽度和高度，包括内边距但不包括外边距和边框。例如，下面的代码将返回一个元素的内部宽度和高度：

```

const el = document.getElementById("myElem");

const clientWidth = el.clientWidth;

const clientHeight = el.clientHeight;

```

offsetWidth/offsetHeight属性表示元素的外部宽度和高度，包括内边距和边框但不包括外边距。例如，下面的代码将返回一个元素的外部宽度和高度：

```

const el = document.getElementById("myElem");

const offsetWidth = el.offsetWidth;

const offsetHeight = el.offsetHeight;

```

注意事项

要注意的是，获取元素尺寸属性的值是一个整数，并且基于像素。如果希望获得相对于视口或父元素的尺寸，则可以使用getBoundingClientRect()方法。例如，下面的代码将返回一个元素在视口中的位置和尺寸信息：

```

const el = document.getElementById("myElem");

const rect = el.getBoundingClientRect();

const top = rect.top;

const left = rect.left;

const width = rect.width;

const height = rect.height;

```

此外，根据CSS的盒模型，一个元素的总宽度和高度可以由多种形式的宽度和高度属性组成，包括内容尺寸、内边距、边框、外边距等。因此，在计算元素的尺寸时，需要考虑所有这些因素的影响。

总结

在JavaScript中，可以使用clientWidth/clientHeight和offsetWidth/offsetHeight属性获取元素的尺寸信息。如果需要获取相对于视口或父元素的尺寸，则可以使用getBoundingClientRect()方法。在计算元素的尺寸时，需要考虑所有的宽度和高度因素。