web环境之宽高，位置

默默@85

于 2024-08-27 14:24:02 发布

阅读量335

点赞数 11

分类专栏： js 文章标签： javascript web

本文链接：https://blog.csdn.net/qq_40278396/article/details/141596018

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

宽高信息

容器

一个页面的展示从外到内的容器为：屏幕，浏览器以及页面本身。

物理尺寸和分辨率

容器的尺寸是指当前分辨率下的高度，宽度，而不是物理高度，宽度。

屏幕（Screen）

屏幕信息：屏幕，软件可用以及任务栏的高度和宽度（整个显示器或设备的屏幕，包括所有外边框）

screen.height ：屏幕高度。
screen.width ：屏幕宽度。
screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。
screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。
任务栏高/宽度：可通过屏幕高/宽度减去屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。

浏览器 (Window)

浏览器信息：浏览器内部页面以及工具栏的宽度和高度

window.outerHeight：浏览器高度。
window.outerWidth ：浏览器宽度。
window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。
工具栏高/宽度：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。
窗口（Window）
- 指的是浏览器应用程序的窗口，包括浏览器工具栏、标签栏、滚动条等。
- 可以通过 window.outerWidth 和 window.outerHeight 获取浏览器窗口的整体宽高。
视口（Viewport）
- 指的是浏览器中实际显示网页内容的区域，不包括浏览器的工具栏等控件。
- 可以通过 window.innerWidth 和 window.innerHeight 获取视口的宽高。

文档/页面 (Document/Page)

文档是指整个网页内容，包括可见部分和不可见部分（即需要滚动才能看到的部分）。

body.offsetHeight ：body总高度。
body.offsetWidth ：body总宽度。
body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。
body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。
滚动条高度/宽度：如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。

展示图

在这里插入图片描述

位置信息

元素的绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

　　function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}

　　function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualTop;
　　}

元素的相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。

有绝对位置后，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。
滚动条滚动的垂直距离，是document对象的scrollTop属性；
滚动条滚动的水平距离是document对象的scrollLeft属性。

　　function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}

　　　　return actualLeft-elementScrollLeft;
　　}

　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}

　　　　return actualTop-elementScrollTop;
　　}

`getBoundingClientRect()`

getBoundingClientRect 方法用于获取元素相对于视口的位置和尺寸信息。它返回一个 DOMRect 对象，其中包含了元素的边框相对于视口（浏览器窗口）左上角的坐标以及宽高，这在进行精确定位、动画和碰撞检测等场景时非常有用。

返回值

getBoundingClientRect 方法返回一个 DOMRect 对象，它包含以下属性：

x: 元素左边缘到视口左边缘的距离，相当于 left。
y: 元素顶边缘到视口顶边缘的距离，相当于 top。
width: 元素的宽度。
height: 元素的高度。
top: 元素顶边缘到视口顶边缘的距离。
right: 元素右边缘到视口左边缘的距离。
bottom: 元素底边缘到视口顶边缘的距离。
left: 元素左边缘到视口左边缘的距离。

示例

//网页元素的相对位置就是

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

//加上滚动距离，就可以得到绝对位置

var X1= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y1 =this.getBoundingClientRect().top+document.documentElement.scrollTop;

关于DOM的相关属性

clientHeight和clientWidth

包含内容和内边距（padding）
不包含边框（border）、外边距（margin）和滚动条
如果有水平滚动条，也不会包含它的高度;有垂直滚动条，也不会包含它的宽度

offsetHeight和offsetWidth

包含内容、内边距（padding）和边框（border）
不包含外边距（margin）
包括水平滚动条的高度(垂直滚动条的宽度)，如果存在的话
该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关

clientTop和clientLeft

返回元素上边框的宽度，以像素为单位
通常用来确定元素内容区域相对于其外部边缘的位置
也就是左，上边框宽度

offsetTop和offsetLeft

表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

offsetParent

返回最近的已定位的祖先元素，如果没有已定位的祖先元素，则返回根元素（通常是元素）。
已定位的意思是 position 属性被设置为 relative、absolute 或 fixed。

scrollWidth和scrollHeight

返回元素内容的实际宽度，包括溢出部分（即被隐藏的部分）
当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等。
需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。

scrollLeft和scrollTop

是指元素滚动条位置，它们是可写的
元素被卷起的高度和宽度。

+-----------------------------------------------------+
|                    外边距 (margin)                  |
| +-----------------------------------------------+   |
| |                 边框 (border)                 |   |
| |  +-----------------------------------------+  |   |
| |  |              内边距 (padding)           |  |   |
| |  |    +-------------------------------+    |  |   |
| |  |    |                               |    |  |   |
| |  |    |         内容 (content)        |    |  |   |
| |  |    |                               |    |  |   |
| |  |    +-------------------------------+    |  |   |
| |  +-----------------------------------------+  |   |
| +-----------------------------------------------+   |
+-----------------------------------------------------+

clientHeight = 内容高度 + 内边距高度
clientWidth = 内容宽度 + 内边距宽度

offsetHeight = 内容高度 + 内边距高度 + 边框高度 + 滚动条高度（若存在）
offsetWidth = 内容宽度 + 内边距宽度 + 边框宽度 + 滚动条宽度（若存在）

clientTop = 上边框宽度
clientLeft = 左边框宽度

scrollWidth = 整个可滚动内容的宽度
scrollHeight = 整个可滚动内容的高度

scrollLeft = 当前水平滚动位置
scrollTop = 当前垂直滚动位置