前端window,sreen,document,可视区，dom,鼠标位置等尺寸汇总-白红宇的个人博客

前端window,sreen,document,可视区，dom,鼠标位置等尺寸汇总

发布日期：2022-02-22 16:04:51 浏览次数：38 分类：技术文章

本文共 1695 字，大约阅读时间需要 5 分钟。

区分屏幕screen，视口viewport，浏览器window,文档document，body

屏幕screen：显示器的特性不会变化，screen.width; screen.height; 即分辨率的大小

浏览器窗口window: 内在尺寸 window.innerHeight; window.innerWidth;包含滚动条

视口viewport：浏览器窗口的可视区域，可以通过document.documentElement.clientWidth与document.documentElement.clientHeight获取（不包含滚动条）

document： document.documentElement 返回整个<html></html>

body: document.body返回<body></body>

document,screen 是window下的属性，body是document的属性

宽高

offsetWidth / offsetHeight=边框+内边距+width/height

clientHeight: 不涉及滚动条时,clientHeight=offsetHeight-边框; clientWidth: 不涉及滚动条时,clientWidth=offsetWidth-边框

可视区域宽高： document.body.clientWidth / clientHeight; document.documentElement.clientHeight / clientWidth 随着窗口的变化而改变

scrollWidth / scrollHeight: 一个元素内容宽高，包括由于溢出导致的视图中不可见内容。 没有滚动条时=clientHeight

offsetWidth / offsetHeight 带边框； clientWidth / clientHeight 、 scrollWidth / scrollHeight 不带滚动条、边框和外边距

在这里插入图片描述

滚动大小

scrollLeft：滚动条向左滚动的大小；

scrollTop：滚动条向上滚动的大小 IE7及以下 document.body.scrollTop；当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
- 为style.top 赋值时，会对scrollTop有影响
- document 或 window 触发
- document.documentElement.scrollTop获取窗口滚动条向上滚动的大小

scrollIntoView(false);参数:true（默认）:元素和页面顶对齐； false:元素和页面底对齐

判断元素是否滚动到底部：元素整个高度 减去 向上滚动的高度 = 可视区内的高度element.scrollHeight - element.scrollTop === element.clientHeight

坐标位置

event.pageX event.pageY 鼠标和 document 页面左上角的距离

event.clientX event.clientY鼠标和浏览器可视区左上角的距离（以可视窗口为基准的鼠标位置，与滚动条滚动无关）

event.screenX event.screenY 鼠标和屏幕左上角的距离（以屏幕为准）

offsetX offsetY 事件对象与目标节点的内填充边（padding edge）在 X / Y 轴方向上的偏移量。

偏移量只读

offsetLeft / offsetTop：当前元素距离offsetParent 内边距 左上角的水平/垂直距离。

offsetParent属性，返回值：dom元素的基准父元素默认是body,除非给定位

当前元素最近的包含该元素的定位元素或者最近的 table,td,th,body元素。

当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。

愿你熬过万丈孤独，藏下星辰大海~

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/115494029 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：JS事件模型

下一篇：从浏览器地址栏输入框内输入url 到页面渲染的过程

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

区分屏幕screen，视口viewport，浏览器window,文档document，body

宽高

滚动大小

坐标位置

偏移量只读

发表评论

最新留言

关于作者

推荐文章

区分屏幕screen，视口viewport，浏览器window,文档document，body

宽高

滚动大小

坐标位置

偏移量 只读

发表评论

最新留言

关于作者

推荐文章

偏移量只读