DOM元素Window关于宽高、screen、scroll相关属性详解

了解或者熟悉 window 对象的关于宽高、screen、scroll 相关属性，我们在进行自定义控件或者进行绘制的实现时候，是比较重要的参考参数。有些参数名字相近或者相似，比较难区分。因此，非常有必要来梳理一下。

宽高，scroll，screen 相关的属性如下：

• ``

• innerWidth：可视区域的宽度。
• innerHeight：可视区域的高度。
• scrollX：滚动条的水平位置。
• scrollY：滚动条的垂直位置。
• screenLeft：浏览器窗口在屏幕上的左侧位置。
• screenTop：浏览器窗口在屏幕上的顶部位置。
• screenX：鼠标光标在屏幕上的水平位置。
• screenY：鼠标光标在屏幕上的垂直位置。
• scrollWidth：元素的滚动宽度。
• scrollHeight：元素的滚动高度。
• clientWidth：元素的内容宽度。
• clientHeight：元素的内容高度。
• offsetWidth：元素的总宽度，包括边框和内边距。
• offsetHeight：元素的总高度，包括边框和内边距。

此外，还可以通过 document.body 和 document.documentElement 来获取一些与宽高相关的属性：

• document.body.clientWidth：body元素的内容宽度。
• document.body.clientHeight：body元素的内容高度。
• document.documentElement.clientWidth：html元素的内容宽度。
• document.documentElement.clientHeight：html元素的内容高度。

相似属性的对比区分

下面我们列出一些名字相近或者相似的属性，并进行对比区分：

• innerWidth 与 clientWidth：innerWidth 是可视区域的宽度，clientWidth 是元素的内容宽度。
• innerHeight 与 clientHeight：innerHeight 是可视区域的高度，clientHeight 是元素的内容高度。
• scrollX 与 scrollLeft：scrollX 是滚动条的水平位置，scrollLeft 是元素的水平滚动位置。
• scrollY 与 scrollTop：scrollY 是滚动条的垂直位置，scrollTop 是元素的垂直滚动位置。
• screenLeft 与 screenX：screenLeft 是浏览器窗口在屏幕上的左侧位置，screenX 是鼠标光标在屏幕上的水平位置。
• screenTop 与 screenY：screenTop 是浏览器窗口在屏幕上的顶部位置，screenY 是鼠标光标在屏幕上的垂直位置。

如何使用这些属性？

在实际开发中，这些属性可以用于各种各样的目的，比如：

• 确定浏览器窗口的大小。
• 确定滚动条的位置。
• 确定鼠标光标的位置。
• 创建自定义滚动条。
• 绘制图形。

避免使用 offsetWidth 和 offsetHeight

在大多数情况下，不建议使用 offsetWidth 和 offsetHeight。这是因为这两个属性会受到元素的边框和内边距的影响，而这可能会导致一些意外的结果。

总结

本文详细介绍了 DOM 元素 Window 对象关于宽高、screen、scroll 相关属性。希望本文能够帮助您更好地理解和使用这些属性。