一文理清JS中获取盒子宽高各方法的差异

前言

这段时间在研究一个反爬产品，环境检测用到了很多个盒子宽高取值方法，如window.outerWidth、window.screen.availWidth，各个方法取值结果不大相同，在此记录下遇到的方法。
教程文档：ES6 入门教程

各宽方法区别

这里就讲解下各宽度方法的区别，同样可以使用与高度方法的理解
宽度方法：outerWidth、width、innerWidth、offsetWidth、scrollWidth、clientWidth、availWidth

以盒子取值区别

一般来说盒子会有width、offsetWidth、scrollWidth、clientWidth这四个宽取值方法

width

• 定义：CSS属性，用于设置元素的宽度。
• 取值：取决于CSS样式中的设置，可以是像素值（px）、百分比（%）、视口单位（vw）、em、rem等。
• 特点：这是元素宽度的“设定值”，实际渲染时可能受其他CSS属性（如padding、border、margin）影响。

offsetWidth

• 定义：JavaScript属性，表示元素的布局宽度，即元素在页面上占用的宽度。
• 取值：等于元素的CSS宽度加上左右内边距（padding）和左右边框（border）的宽度（如果存在滚动条且可见，则也包含滚动条的宽度）。
• 特点：这是一个“实际占用宽度”的值，包括了元素内容区、内边距和边框的宽度。

scrollWidth

• 定义：JavaScript属性，表示元素内容的总宽度。
• 取值：如果元素内容没有溢出，则scrollWidth等于clientWidth或offsetWidth（取决于是否有边框和内边距）；如果内容溢出，则scrollWidth等于内容实际占用的宽度。
• 特