JS获取各种宽度、高度的简单介绍

JS 获取各种宽度、高度的简单介绍，我们可以分为以下几类：元素的尺寸、元素的位置和窗口的尺寸。

元素的尺寸

获取元素的宽度和高度

• offsetWidth 和 offsetHeight： 元素的盒模型的宽度和高度，包括元素的边框和滚动条、但不包括外边距和内边距。
• clientWidth 和 clientHeight：元素的盒模型的宽度和高度，包括内边距、但不包括外边距、滚动条和边框。

例如我们需要获取一个元素的宽度和高度，代码如下：

const element = document.getElementById('example'); // 通过id获取元素
const offsetWidth = element.offsetWidth; // 获取元素的盒模型宽度
const offsetHeight = element.offsetHeight; // 获取元素的盒模型高度
console.log(offsetWidth, offsetHeight);

获取元素的内部尺寸

• scrollWidth 和 scrollHeight：元素的实际内容的宽度和高度，包括元素未被渲染的内容区域、但不包括内边距、滚动条和边框。

例如我们需要获取一个元素的内部宽度和高度，代码如下：

const element = document.getElementById('example'); // 通过id获取元素
const scrollWidth = element.scrollWidth; //获取元素内容的实际宽度
const scrollHeight = element.scrollHeight; // 获取元素内容的实际高度
console.log(scrollWidth, scrollHeight);

元素的位置

获取元素的相对位置

• offsetLeft 和 offsetTop：元素相对于父级元素的左侧和顶部位置。
• offsetParent：元素的父级元素。

例如我们需要获取一个元素相对于父级元素的位置和父级元素，代码如下：

const element = document.getElementById('example'); //通过id获取元素
const offsetLeft = element.offsetLeft; // 获取元素距离父类元素的左侧位置
const offsetTop = element.offsetTop; // 获取元素距离父类元素的顶部位置
const offsetParent = element.offsetParent; // 获取元素的父级元素
console.log(offsetLeft, offsetTop, offsetParent);

窗口的尺寸

获取窗口大小

• window.innerWidth 和 window.innerHeight：窗口的视口（viewport）的宽度和高度。
• document.documentElement.clientWidth 和 document.documentElement.clientHeight： 文档的根元素（html元素）的宽度和高度，不包括外边距。

例如我们需要获取窗口的宽度和高度，代码如下：

const width = window.innerWidth; //获取视窗的宽度
const heigth = window.innerHeight; //获取视窗的高度
console.log(width, height);

以上是JS获取各种宽度、高度的简单介绍，如果想深入了解更多可以去查阅相关文献。