如何使用JavaScript获取盒模型的宽和高？

11 min read

有以下几种方法可以获取元素的盒模型宽和高：

  1. 使用element.offsetWidth和element.offsetHeight获取包括边框、内边距和元素内容的总宽高。
var elementWidth = element.offsetWidth;
var elementHeight = element.offsetHeight;
  1. 使用element.clientWidth和element.clientHeight获取除边框外的元素内容宽高。
var elementWidth = element.clientWidth;
var elementHeight = element.clientHeight;
  1. 使用element.getBoundingClientRect()获取元素相对于视口的位置和尺寸，其中包括边框宽度和内边距。
var bbox = element.getBoundingClientRect();
var elementWidth = bbox.width;
var elementHeight = bbox.height;

需要注意的是，以上方法都只适用于块级元素和替换元素。行内元素和行内块元素的尺寸计算方式要注意。