JS盒子模型

JavaScript中的盒子模型通常指的是HTML元素在页面中的表示和排列方式，由浏览器处理和管理。盒子模型描述了一个元素在页面布局中所占据的空间，包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。

基于JS盒子模型获取的值都是整数（可能会和实际的只产生一些偏差）。

image.png

client开头的

• clientWidth 元素可视区域的宽度：内容+左右padding-滚动条的宽度
• clientHeight 元素可视区域的高度：内容+上下padding-滚动条的高度
• clientTop/Left 元素的上/左边框的宽度

offset 开头的

• offsetParent 距离元素最近的具有定位的祖宗元素
• offsetWidth 元素内容 + 左右padding + border
• offsetHeight 元素内容 + 上下padding + border
• offsetTop 距离其父级参照物（offsetParent）的上偏移量（从当前元素的外边框到父级参照物的内边框）
• offsetLeft 距离其父级参照物（offsetParent）的左偏移量（从当前元素的外边框到父级参照物的内边框）

scroll 开头的

• scrollTop 竖向滚动条卷去的高度
• scrollLeft 横向滚动条卷去的宽度

scrollTop、scrollLeft是13个盒子模型属性中唯二可以修改的属性（其余都是只读的，只有这两个是可改写的），通过修改对应的值，可以控制滚动条的滚动。

在内容没有溢出的时候，scrollWidth /scrollHeight 和clientWidth/clientHeight结果是一样的；在内容溢出的情况下，它的结果包含了溢出内容宽高（但是这个值是一个约等于的值，不完全准确，在不同浏览器中，因为对内容渲染机制的差异，结果是不一样的，而且我们设置的overflow的值也对最后的结果有影响）

• scrollWidth
• scrollHeight

获取当前页面真实的宽度和高度，包括溢出的那部分内容

document.documentElement.scrollWidth

document.documentElement.scrollHeight

在JavaScript中，你可以通过访问和修改元素的样式属性来操纵和管理盒子模型的各个部分。例如，你可以使用element.style来访问元素的样式属性：

javascriptCopy code
const element = document.getElementById('myElement');

// 获取元素的宽度和高度（不包括内边距、边框和外边距）
const width = element.clientWidth;
const height = element.clientHeight;

// 获取元素的完整宽度和高度（包括内边距和边框，但不包括外边距）
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;

// 获取元素的边框宽度
const borderLeftWidth = element.clientLeft;
const borderTopWidth = element.clientTop;

// 获取元素的内边距
const paddingLeft = parseInt(window.getComputedStyle(element).paddingLeft);
const paddingTop = parseInt(window.getComputedStyle(element).paddingTop);

// 获取元素的外边距
const marginTop = parseInt(window.getComputedStyle(element).marginTop);
const marginBottom = parseInt(window.getComputedStyle(element).marginBottom);

这些属性可以让你获取元素在页面中所占据的空间大小，并且可以通过JavaScript来修改元素的样式，例如改变元素的宽度、高度、边框、内边距和外边距等。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！