offset、client、scroll、screen的自己理解

最新推荐文章于 2024-04-21 10:33:25 发布

瞎转悠达

最新推荐文章于 2024-04-21 10:33:25 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35859392/article/details/88002758

offset、client、scroll、screen的自己理解

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。