为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5

一、前言

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

二、DOM 之 Window

宽高,scroll,screen 相关的属性如下。
图片描述

2.1 宽高

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

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

下图说明了它们的区别。

图片描述

2.2 scroll

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

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

图片描述

2.3 screen

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

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

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
4
获赞与收藏
29

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消