JS获取元素尺寸的几种方式

在JavaScript中，获取元素的尺寸和位置可以通过以下几种方式实现：

1. 
   element.offsetWidth 和 element.offsetHeight: 获取元素的宽度和高度，包括元素的边框(border)、内边距(padding)和滚动条，但不包括外边距(margin)。
   
   
   
2. 
   element.offsetLeft 和 element.offsetTop: 获取元素的左边和顶部相对于其 offsetParent 的偏移量，包括边框。
   
   
   
3. 
   element.clientWidth 和 element.clientHeight: 获取元素的宽度和高度，包括内边距(padding)，但不包括边框(border)、滚动条和外边距(margin)。
   
   
   
4. 
   element.getBoundingClientRect().width 和 element.getBoundingClientRect().height: 获取元素的宽度和高度，包括边框，但不包括外边距(margin)。
   
   
   
5. 
   window.getComputedStyle(element).width 和 window.getComputedStyle(element).height: 获取元素的宽度和高度，这个值是经过计算后的，包括外边距(margin)和边框，但不包括内边距(padding)。
   
   
   

以下是使用这些属性的示例代码：

// 假设有一个元素 <div id="myElement"></div>
var myElement = document.getElementById('myElement');
 
// 获取元素的宽度和高度，包括边框和内边距，但不包括外边距和滚动条
var offsetWidth = myElement.offsetWidth;
var offsetHeight = myElement.offsetHeight;
 
// 获取元素的左边和顶部相对于其 offsetParent 的偏移量，包括边框
var offsetLeft = myElement.offsetLeft;
var offsetTop = myElement.offsetTop;
 
// 获取元素的宽度和高度，包括内边距，但不包括边框、滚动条和外边距
var clientWidth = myElement.clientWidth;
var clientHeight = myElement.clientHeight;
 
// 获取元素的宽度和高度，包括边框，但不包括外边距
var rectWidth = myElement.getBoundingClientRect().width;
var rectHeight = myElement.getBoundingClientRect().height;
 
// 获取元素的宽度和高度，这个值是经过计算后的，包括外边距和边框，但不包括内边距
var computedWidth = window.getComputedStyle(myElement).width;
var computedHeight = window.getComputedStyle(myElement).height;

请注意，offsetWidth 和 offsetHeight 返回的是数值，而 getBoundingClientRect().width 和 getBoundingClientRect().height 返回的是不带单位的数值，而 window.getComputedStyle(element).width 和 window.getComputedStyle(element).height 返回的是带有单位的字符串。