宽高信息
容器
一个页面的展示从外到内的容器为:屏幕,浏览器以及页面本身。
物理尺寸和分辨率
容器的尺寸是指当前分辨率下的高度,宽度,而不是物理高度,宽度。
屏幕(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 = 当前垂直滚动位置
event对象下的位置
clientX
和clientY
- 该属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,
- 不管浏览器窗口大小如何变化,都不会影响点击位置的坐标。
screenX
和screenY
该属性是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的
screenX
和screenY
值
offsetX
和offsetY
该属性是指当事件发生时,鼠标点击位置相对于该事件源的位置,即点击该
div
,以该div
左上角为原点来计算鼠标点击位置的坐标
Firefox不支持该属性,Firefox中与此属性相对应的概念是,
event.layerX
和event.layerY
,所以需要兼容浏览器时,获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX
pageX
和pageY
- 该属性是事件发生时鼠标点击位置相对于页面的位置。
- 通常浏览器窗口没有出现滚动条时,该属性和
event.clientX
及event.clientY
是等价的,但是当浏览器出现滚动条的时候,pageX
通常会大于clientX
,因为页面还存在被卷起来的部分的宽度和高度,