获取JS中网页各种高宽与位置的方法总结

获取JS中网页各种高宽与位置是前端开发过程中非常重要的操作之一，本篇攻略将会总结一些在实际开发中常用的方法。

使用原生JavaScript获取元素高宽与位置

在JavaScript中，有三个属性可以用来获取元素的高宽与位置，分别为offsetHeight/Width、clientHeight/Width和getBoundingClientRect()。

offsetHeight/Width

offsetHeight/Width属性可以用来获取元素自身的高度和宽度，包括元素的边框、内边距和滚动条，但不包括外边距。示例代码如下：

const element = document.getElementById('myElement');
const height = element.offsetHeight;
const width = element.offsetWidth;
console.log(`Height: ${height}, Width: ${width}`);

clientHeight/Width

clientHeight/Width属性可以用来获取元素的内部高度和宽度，包括内边距，但不包括边框、滚动条和外边距。示例代码如下：

const element = document.getElementById('myElement');
const height = element.clientHeight;
const width = element.clientWidth;
console.log(`Height: ${height}, Width: ${width}`);

getBoundingClientRect()

getBoundingClientRect()方法可以用来获取元素的位置和大小信息，包括了元素的位置、宽、高、左上角和右下角位置等。示例代码如下：

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
console.log(rect);

使用jQuery获取元素高宽与位置

jQuery是一个广泛应用于JavaScript中的框架，可以用来更方便地获取元素高宽和位置信息，非常适用于快速开发和组件制作。

.outerHeight()/.outerWidth()

.outerHeight()和.outerWidth()方法可以用来获取元素的外部高度和宽度，包括边框、内边距和（可选）外边距。示例代码如下：

const element = $('#myElement');
const height = element.outerHeight();
const width = element.outerWidth();
console.log(`Height: ${height}, Width: ${width}`);

.height()/.width()

.height()和.width()方法可以用来获取元素的内部高度和宽度，包括内边距，但不包括边框和外边距。示例代码如下：

const element = $('#myElement');
const height = element.height();
const width = element.width();
console.log(`Height: ${height}, Width: ${width}`);

.position()

.position()方法可以用来获取元素相对于父元素的位置。示例代码如下：

const element = $('#myElement');
const position = element.position();
console.log(position);

结语

以上是使用原生JavaScript和jQuery获取元素高宽和位置的方法总结，我们可以灵活运用这些方法来更好地完成网站的开发。