body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;
window.screen.width、window.screen.height、screen.width、screen.height分别表示显示屏幕的宽高,即屏幕的分辨率。
window.innerHeight、window.innerWidth分别表示浏览器展示页面内容可见的高度和宽度。
window.outerHeight、window.outerWidth分别表示浏览器的高度和宽度,包括收藏栏等等这些的宽度和高度。
client
document.documentElement.clientWidth:测试没有找到规律。应该没什么用吧
document.documentElement.clientHeight:测试没有找到规律。应该没什么用吧
document.body.clientWidth:body宽度。
document.body.clientHeight:body宽度。
document.documentElement.clientLeft = html的border-left-width。
document.documentElement.clientTop = html的border-top-width。
document.body.clientLeft = body的border-left-width。
document. body.clientTop = body的border-top-width。
element.clientWidth = 左侧内边距+内容宽度+右侧内边距。
element.clientHeight = 上侧内边距+内容高度+下侧内边距。
element.clientLeft = border-left-width。
element.clientTop = border-top-width。
element.clientRight = undefined。
element.clientBottom = undefined。
Offset
document.documentElement.offsetWidth:表示html的宽度,不包括html的margin和border宽度。
document.documentElement.offsetHeight:表示html的高度,不包括html的margin和border宽度。
document.body.offsetWidth:表示body的宽度,不包括body的margin和border宽度。
document.body.offsetHeight:表示body的高度,不包括body的margin和border宽度。
document.documentElement.offsetLeft = html的borde-left距离浏览器右边框的距离。
document.documentElement.offsetTop = html的border-top距离浏览器上边框的距离。
document.body.offsetLeft = 0
document.body.offsetTop = 0
element.offsetWidth = 左侧边框宽度+左侧内边距+内容宽度+右侧内边距+右侧边框宽度。
element.offsetHeight = 上侧边框宽度+上侧内边距+内容高度+下侧内边距+下侧边框宽度。
element.offsetLeft = element的borde-left距离浏览器右边框的距离。
element.offsetTop = element的border-top距离浏览器上边框的距离。
offsetParent 返回这个元素的父级元素
element.offsetRight = undefined。
element.offsetBottom = undefined。
scroll
document.documentElement.scrollWidth:表示浏览器页面宽度,有滚动条是包括滚动条后面的
document.documentElement.scrollHeight:表示浏览器页面高度,有滚动条是包括滚动条后面的
document.documentElement.scrollTop:表示垂直方向滚动条滚动过的距离
document.documentElement.scrollLeft:表示水平方向滚动条滚动过的距离
if (window.pageXOffset !== undefined) {
// 所有浏览器,除了 IE9 及更早版本 alert("水平滚动距离: " + window.pageXOffset); alert("垂直滚动距离: " + window.pageYOffset); } else {
// IE9 及更早版本 alert("水平滚动距离: " + document.documentElement.scrollLeft); alert("垂直滚动距离: " + document.documentElement.scrollTop); }
document.body.scrollWidth:不知道具体表示什么,不用它
document.body.scrollHeight:不知道具体表示什么,不用它
document.body.scrollTop = 0。
document.body.scrollLeft = 0。
element.scrollWidth = 左侧内边距+内容宽度+右侧内边距。
element.scrollHeight = 上侧内边距+内容高度+下侧内边距。
element.scrollLeft :当父元素宽度小于子元素宽度时,且存在滚动条时,获取父元素上的scrollLeft的滚动条滚动过的距离。
element.scrollTop :当父元素高度小于子元素高度时,且存在滚动条时,获取父元素上的scrollTop的滚动条滚动过的距离。
element.scrollRight = undefined。
element.scrollBottom = undefined。