【Javascript】获取各种宽度高度

一、显示器对象 screen

1. height / width

返回屏幕的高度（单位：像素）:

let height = window.screen.height

返回屏幕的宽度:

let width = window.screen.width

说明：

该值表示的是屏幕的物理高度/宽度，包括所有的显示区域，不管是否被操作系统界面（如任务栏）或者其他软件（比如浏览器）的界面所占用。

应用场景：

通常用于获取屏幕的实际尺寸，无论操作系统或其他应用程序是否占用了屏幕的一部分。它对于理解用户的设备类型和屏幕大小非常有用，但并不适用于布局决策，因为它不考虑可用的显示空间

3. availHeight / availWidth

返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度:

let availHeight = window.screen.availHeight

返回浏览器窗口可占用的水平宽度（单位：像素）:

let availWidth = window.screen.availWidth

说明：

availHeight 这个属性返回屏幕上可用于网页的高度，即不被操作系统界面（如任务栏）遮挡的部分，单位也是像素(pixel)。

应用场景：

对于需要根据屏幕可用空间来布局Web页面的情况非常有用，因为它告诉你实际上可以用来展示内容的空间大小。比如，你可能想要根据可用宽度来决定是否显示一个边栏或者如何排列某些元素

二、 window

1. innerHeight / innerWidth

let innerHeight = window.innerHeight

浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

let intViewportWidth = window.innerWidth;

只读的 Window 属性 innerWidth， 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。

2. outerHeight / outerWidth

let outerHeight = window.outerHeight

Window.outerHeight 只读属性返回整个浏览器窗口的高度（以像素为单位），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing border/handle）。

let outerWidth = window.outerWidth;

Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）

3. outerHeight 和 innerHeight 两者的区别

4. screenX / screenY

let screenX = window.screenX

返回浏览器左边界到操作系统桌面左边界的水平距离。

let screenY = window.screenY

返回浏览器顶部距离系统桌面顶部的垂直距离。

5. screenLeft / screenTop

Window.screenLeft 是一个只读属性，它返回浏览器左边框到左边屏幕边缘的 CSS 像素数
Window.screenTop 只读属性返回垂直距离，单位是 CSS 像素，从用户浏览器的上边界到屏幕最顶端。

6. screenY 和 screenTop 的区别

1. 兼容性：screenY在所有现代浏览器中得到了广泛支持，包括Firefox、Chrome、Safari等。而screenTop曾经主要用于兼容早期的Internet Explorer版本。
2. 标准化：screenY是一个更加标准化的属性，它的行为和支持度在各个浏览器中都比较一致。相比之下，screenTop可以看作是一个非标准属性，尽管在很多现代浏览器中它仍然可用。

对于现代Web应用开发，推荐使用screenY以获得更好的跨浏览器兼容性。

三、HTMLElement

1. offsetTop / offsetLeft

offsetTop:
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
具体来说，offsetTop表示元素的上外边框（margin的上边界）距离其最近的定位祖先元素（offsetParent）的内部上边框（padding的上边界）的距离。

offsetParent：HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素

let top = element.offsetTop;

注意点：

1. 计算的是距离offsetParent的距离：如果元素的直接父元素没有进行CSS定位（即CSS的position属性为static，这是默认值），那么offsetParent很可能是更上层的一个元素，直到 body。因此，测量的结果可能并不是距离最直接父元素的距离。
2. 不受滚动影响：offsetTop的值不会因为滚动页面而改变。它始终是基于元素的最初布局计算的。

进阶应用：
计算一个元素相对于整个文档的顶部的距离:

function getOffsetTop(element) {
    let offsetTop = 0;
    while(element) {
        offsetTop += element.offsetTop;
        element = element.offsetParent;
    }
    return offsetTop;
}

offsetLeft
HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 offsetParent 节点的左边界偏移的像素值。

let left = element.offsetLeft;

示例：

2. offsetWidth / offsetHeight

offsetWidth
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度，包括元素的内容区域、内边距（padding）、边框（border），但不包括外边距（margin）。

let offsetWidth =element.offsetWidth;

offsetHeight
HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

示例：

3. scrollTop / scrollLeft

scrollTop
Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

简而言之，scrollTop 可以告诉你用户已经在垂直方向上滚动了多远。

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;

scrollLeft
Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

4. scrollHeight / scrollWidth

scrollHeight
Element.scrollHeight 只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
包括：内边距（padding）
不包括：边框（border）和外边距（margin）

var scrollHeight = element.scrollHeight;

示例：

scrollWidth
Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。

5. clientHeight / clientWidth

clientHeight
元素内部的高度（以像素为单位）
包含：内边距
不包括：边框、外边距和水平滚动条（如果存在）

clientWidth
元素内部的宽度
包括：内边距（padding）
不包括：边框（border）、外边距（margin）和垂直滚动条（如果存在）。

示例：

6. clientLeft / clientTop

clientLeft
表示一个元素的左边框的宽度，以像素表示
clientTop
一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的