JS中位置与大小的获取方法

当我们开发JavaScript程序时，经常需要获取页面元素的位置与大小，以便进行后续的操作。接下来，我将为大家介绍JS中获取元素位置与大小的方法。

获取元素位置

1. offsetTop和offsetLeft属性

offsetTop和offsetLeft是用来获取某个元素相对于其offsetParent元素（指具有定位属性的父元素）的左上角距离的。

const elem = document.querySelector('#my-elem');
const top = elem.offsetTop;   // 获取元素距离其offsetParent元素顶部的距离
const left = elem.offsetLeft; // 获取元素距离其offsetParent元素左侧的距离

2. getBoundingClientRect方法

getBoundingClientRect()方法能够获取一个元素的位置信息，包括元素的上边距、左边距、下边距、右边距和元素的宽度、高度。

const elem = document.querySelector('#my-elem');
const rect = elem.getBoundingClientRect();
const top = rect.top; // 获取元素上边距相对于视口的距离
const left = rect.left; // 获取元素左边距相对于视口的距离
const bottom = rect.bottom; // 获取元素下边距相对于视口的距离
const right = rect.right; // 获取元素右边距相对于视口的距离
const width = rect.width; // 获取元素宽度
const height = rect.height; // 获取元素高度

获取元素大小

1. offsetWidth和offsetHeight属性

offsetWidth和offsetHeight属性用来获取某个元素的整个大小（包括padding、border、width/height属性的值）。

const elem = document.querySelector('#my-elem');
const width = elem.offsetWidth; // 获取元素的宽度，包括padding和border
const height = elem.offsetHeight; // 获取元素的高度，包括padding和border

2. clientWidth和clientHeight属性

clientWidth和clientHeight属性获取的是元素的可见宽度和高度，也就是不包括元素的border和滚动条的宽度。

const elem = document.querySelector('#my-elem');
const cw = elem.clientWidth; // 获取元素的可见宽度，不包括border和滚动条
const ch = elem.clientHeight; // 获取元素的可见高度，不包括border和滚动条

以上就是JS中位置与大小的获取方法。通过以上方法，我们可以轻松地获取元素的位置和大小，从而进行后续的操作。