两个值得咨询的资源:
- CSSOM 视图模块
- W3C DOM 兼容性 - CSS 对象模型视图
以下是两者的摘录列表(每对仅包含一个维度):
window.innerWidth
& window.innerHeight
视口的尺寸(浏览器窗口的内部)。这innerWidth
属性,在获取时,must返回视口宽度,包括渲染的滚动条的大小(如果有)。
window.outerWidth
& window.outerHeight
整个浏览器窗口的尺寸(包括任务栏等)。这outerWidth
属性,在获取时,must返回客户端窗口的宽度。如果没有客户端窗口这个属性must返回零。
window.pageXOffset
& window.pageYOffset
整个页面已滚动的像素数量。这pageXOffset
属性,在获取时,must返回视口左侧相对于初始包含块原点的 x 坐标。
window.screenX
& window.screenY
浏览器窗口在屏幕上的位置。这screenX
属性,在获取时,must以像素数形式返回客户端窗口顶部相对于输出设备屏幕原点的 x 坐标,如果没有这样的东西,则返回零。
screen.availHeight
& screen.availWidth
屏幕上的可用宽度和高度(不包括操作系统任务栏等)。这availWidth
属性,在获取时,must返回输出设备渲染表面的可用宽度。
screen.height
& screen.width
屏幕的宽度和高度。这width
属性,在获取时,must返回输出设备的宽度。
<element>.clientLeft
& <element>.clientTop
内容字段的左上角相对于整个元素(包括边框)左上角的位置。得到后,clientTop
属性返回计算值border-top-width
属性加上顶部内边距边缘和顶部边框边缘之间呈现的任何滚动条的宽度。
<element>.clientWidth
& <element>.clientHeight
内容字段的宽度和高度,不包括边框和滚动条,但包括填充。得到后,clientWidth
如果元素是根元素,属性返回视口宽度,不包括渲染的滚动条(如果有)的大小,否则返回填充边缘的宽度(不包括填充边缘和边框边缘之间的任何渲染的滚动条的宽度)。
<element>.offsetLeft
& <element>.offsetTop
元素相对于其 offsetParent 的左侧和顶部位置。这offsetTop
属性,当在元素上调用时A, must返回以下算法的结果值: (1) 如果A是 HTMLbody
元素或没有关联的 CSS 布局框返回零并停止此算法。 (2) 如果offsetParent
of A is null
或 HTMLbody
元素返回上边框边缘的 y 坐标A并停止这个算法。 (3) 返回减去顶部padding边缘的y坐标的结果offsetParent
of A从顶部边框边缘的 y 坐标A,相对于初始包含块原点。 (*) 如果内联元素由多个行框组成,则出于上述算法的目的,仅考虑内容顺序中的第一个元素。
<element>.offsetWidth
& <element>.offsetHeight
整个元素的宽度和高度,包括边框。这offsetWidth
属性,当在元素上调用时A, must返回值是以下算法的结果: (1) 如果 A 没有关联的 CSS 布局框,则返回零并停止该算法。 (2) 返回边框边缘宽度A.
<element>.scrollLeft
& <element>.scrollTop
元素滚动的像素数量。读/写。这scrollTop
属性,当在元素上调用时A, must返回运行以下算法的结果值: (1) 如果A没有关联的 CSS 布局框返回零并停止此算法。 (2) 返回内容与内容边缘顶部对齐点处的 y 坐标A.
<element>.scrollWidth
& <element>.scrollHeight
整个内容字段的宽度和高度,包括当前隐藏的部分。如果没有隐藏内容,它应该等于 clientX/Y。这scrollWidth
属性,当在元素上调用时A, must返回值是以下算法的结果: (1) 如果A没有关联的 CSS 布局框返回零并停止此算法。 (2) 返回计算值padding-left
的财产A,加上计算值padding-right
的财产A,加上内容宽度A.