理清window和document的区别以及两者的宽高

最新推荐文章于 2025-05-15 14:26:55 发布

JackLiu16

最新推荐文章于 2025-05-15 14:26:55 发布

阅读量1.5k

点赞数 4

分类专栏： web前端

web前端专栏收录该内容

140 篇文章

订阅专栏

一、window和document的区别是什么？

window
1.window对象表示浏览器中打开的窗口。
2.window对象可以省略，如:
alert() 等价于 window.alert()

document
1.document对象是window对象的一部分。如：
document.body 等价于 window.document.body
2.浏览器的html文档成为document对象。

二、window.location和document.location一样吗？

window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL。
document对象的location属性也是引用了location对象。
因此
window.location === document.location //true
location.herf === window.location.href === document.location.href

三、与window相关的宽高（不考虑window.document的情况下）

window.innerWidth（打开窗口的内部宽度）与window.outerWidth（打开窗口的外部宽度）

两者在此表示一样的值
window.innerHeight（打开窗口的内部高度）与window.outerHeight（打开窗口的外部高度）

window的内高与外高

3.window.screen包含有关用户屏幕的信息

window.screen.height（整个屏幕的高。。固定值）
window.screen.width（整个屏幕的宽。。固定值）
window.screen.availHeight（可利用的高，即不包括浏览器Google属性栏。。固定值）
window.screen.availWidth（可利用的宽，与window.screen.width是一样的。。固定值）
window.screenTop（浏览器顶部距屏幕顶部的距离。。随浏览器的缩放以及位置决定）
window.screenLeft（浏览器左侧距屏幕左侧的距离。。随浏览器的缩放以及位置决定）

window.screen.height与window.screen.availHeight

四、与document相关的宽高（以document.body为例）

1. 与client相关的宽高

document.body.clientWidth
document.body.clientHeight
document.body.clientTop
document.body.clientLeft

clientWidth与clientHeight
1> 该属性指的是元素的可视部分宽度和高度，即padding + content。
2> 如果没有滚动条，即为元素设定的高度和宽度。
3> 如果出现滚动条，那么滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。（注意：mac系统下滚动轴不占宽度）
总结：
假如无padding无滚动：clientWidth = style.width
假如有padding无滚动：clientWidth = style.width + style.padding＊２　
假如有padding有滚动，并且滚动轴是显示的：clientWidth = style.width＋style.padding*2 - 滚动轴宽度

clientTop和clientLeft
这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0.
总结：
这一对属性是用来读取元素的border的宽度和高度的。
clientTop = border-top的border-width（边框像素）
clientLeft = border-left的border-widrh（边框像素）

2. 与offset相关的宽高

document.body.offsetWidth
document.body.offsetHeight
document.body.offsetTop
document.body.offsetLeft

offsetWidth与offsetHeight
1> 这一对属性指的是元素的border + padding + content的宽度和高度。
2> 该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。
总结：
假如无padding 无滚动无border：offsetWidth = clientWidth = style.width
假如有padding 无滚动有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth + (border-width)·2
假如有padding 有滚动有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth +滚动轴宽度 + (border-width)·2

offsetLeft与offsetTop

首先先要了解offsetParent这个属性：

1> 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2> 如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

这两个属性对于浏览器的兼容问题：

兼容性

对照上面的公式，下面的例子可帮助深入理解：

3. 与scroll相关的宽高

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollTop
document.body.scrolleft

scrollWidth 与 scrollHeight
注意：document.body的scrollWidth和scrollHeight 与 div中scrollWidth和scrollHeight是有点区别的。
<1> document.body的scrollWidth和scrollHeight

给定宽高小于浏览器窗口
1.scrollWidth通常是浏览器窗口的宽度
2.scrollHeight通常是浏览器窗口的高度
给定宽高大于浏览器窗口，且内容小于给定宽高（有border需乘2）
1.scrollWidth：给定的宽度 + 其所有的padding、margin和border
2.scrollHeight：给定的高度 +其所有的padding、margin和border
给定宽高大于浏览器窗口，且内容大于给定宽高（给定宽高有border不需乘2）
1.scrollWidth：内容宽度 + 其所有的padding、margin和border
2.scrollHeight：内容高度 + 其所有的padding、margin和border

<2> div的scrollWidth和scrollHeight