js 获取元素实际尺寸

可以使用 `offsetWidth` 和 `offsetHeight` 属性来获取元素的实际尺寸，包括边框和内边距，单位为像素。例如：

var element = document.getElementById("myElement");
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Width: " + width + "px, Height: " + height + "px");

还可以使用 `getBoundingClientRect()` 方法获取元素的位置和尺寸信息，包括边框、内边距和滚动条的大小。例如：

var element = document.getElementById("myElement");
var rect = element.getBoundingClientRect();
console.log("Width: " + rect.width + "px, Height: " + rect.height + "px");

需要注意的是，`getBoundingClientRect()` 返回的尺寸信息是相对于视口的，而不是相对于文档的。如果需要计算相对于文档的尺寸信息，可以加上滚动条的偏移量。

相关问题

如何避免padding 会增加元素的实际尺寸

要避免`padding`增加元素的实际尺寸，你可以直接使用`offsetWidth`和`offsetHeight`属性。这些属性返回的是元素的总宽度（包括内边距、边框和外边距）以及总高度，但不考虑滚动条。这样，你就可以得到元素实际占用的空间大小，而不是只看边框内或内容区的尺寸。

示例：

// 获取元素的总宽度（包括padding）
const element = document.getElementById('yourElement');
const totalWidth = element.offsetWidth;

// 获取元素的总高度
const totalHeight = element.offsetHeight;

这样计算出来的尺寸就不会受到`padding`的影响。如果只想获得内容区域的尺寸，而不包括padding，则应继续使用`clientWidth`和`clientHeight`属性，如引用[1]所述：

// 获取内容区域宽度
const contentWidth = element.clientWidth;

// 获取内容区域高度
const contentHeight = element.clientHeight;