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

693 阅读1分钟

一、前言

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

二、DOM 之 Window

宽高,scroll,screen 相关的属性如下。

DOM之Window.jpg

2.1 宽高

宽高的属性 innerWidth、innerHeight: 窗口的宽高,可以理解为实际的画布宽高,包括可滚动的宽高以及滚动条所占的宽高。

outerWidth、outerHeight: 通常指页面所在浏览器的宽高。

下图说明了它们的区别。

宽高.jpg

2.2 scroll

scroll 用来表示window 的滑动位置。通俗点讲,这个是依据屏幕坐标系,也就是左上角为原点 O(0,0) 来说的。所以滑动位置说简单点就是内容滑出浏览器内容区的长度。

scrollX: 就是内容向左滑出的长度。pageXOffset 是它的别名,值一样的。 scrollY: 就是内容向上滑出的长度。pageYOffset 是它的别名,值一样的。

scroll.jpg

2.3 screen

screen 里面就是封装了浏览器所在屏幕的规格,而 window 里面也有一些相关属性:

screenX、screenY: 浏览器左上角在屏幕坐标系上的坐值。screenLeft 和 screenTop 是它的别名,当然也更说明了它的含义。

screen.jpg