20170703

最新推荐文章于 2021-01-27 11:42:26 发布

YetsingZ

最新推荐文章于 2021-01-27 11:42:26 发布

阅读量244

点赞数

分类专栏： IFE学习笔记

本文链接：https://blog.csdn.net/Leaf_217/article/details/78789434

版权

IFE学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

与`document`有关的宽高

clientWidth和clientHeight
指元素可视部分的宽高，即padding+content。如果没有滚动条，就是元素设置的宽高；如果有滚动条，就要将设置的宽高减去滚动条的宽高。
总结如下（以下情况都是滚动条显示的情况，如果滚动条不显示就不用考虑滚动条宽度）：
无滚动条无padding：clientWidth = style.width；
无滚动条有padding：clientWidth = style.width + style.padding*2；
有滚动条无padding：clientWidth = style.width - 滚动条宽度；
有滚动条有padding：clientWidth = style.width + style.padding*2 - 滚动条宽度；
clientLeft和clientTop
用来读取元素border的宽度，clientLeft读取border-left的border宽度，clientTop读取border-top的border宽度。
offsetWidth和offsetHeight
指的是元素的border+padding+content。
总结如下（以下情况都是滚动条显示的情况，如果滚动条不显示就不用考虑滚动条宽度）：
无border 无padding 无滚动条：offsetWidth = clientWdith = style.width；
有border 有padding 无滚动条：offsetWidth = style.width + border宽度*2 + style.padding*2 = clientWdith + border宽度*2；
有border 有padding 有滚动条：offsetWidth = style.width + border宽度*2 + style.padding*2 = clientWdith + border宽度*2 + 滚动条宽度；
offsetParent
如果当前元素的父级元素没有CSS定位（position属性），offsetParent为body；如果有定位，那么offsetParent取那个父级元素。
offsetLeft和offsetTop
在不同浏览器中的定义有一定的差别
document.body的scrollWidth和scrollHeight
以下只针对chrome浏览器
1）给定的body宽高小于浏览器窗口：scrollWidth通常是浏览器窗口的宽度，scrollHeight通常是浏览器窗口的高度（跟innerHeight一样）；
2）给定的body宽高大于浏览器窗口，且body里边的内容小于给定宽高：scrollWidth是body的宽度加上其所有的margin、padding和border（这三个都是乘2的），scrollHeight是body的高度加上其所有的margin、padding和border（这三个也都是乘2的）；
3）给定的body宽高大于浏览器窗口，且body里边的内容大于给定宽高：scrollWidth是body里内容的宽度加上其所有的margin、padding和border（这三个都不乘2，只加上侧的），scrollHeight是body里内容的高度加上其所有的margin、padding和border（这三个也都不乘2，只加左侧的）；
某div中的scrollWidth和scrollHeight
无滚动条：scrollWidth = clientWidth = style.width + style.padding*2；
有滚动条：scrollWidth = 实际的内容宽度 + padding*2，scrollHeight = 实际的内容高度 + padding*2；
scrollLeft和scrollTop
这两个是可以读写的，是指当元素中的内容超过其宽高时，元素被卷起的宽度和高度。
documentElement和body的关系
documentElement返回html，document.body返回body。
所以documentElement和body是父子的关系，document.documentElement.childNodes[2] = document.body。
兼容性问题
client相关宽高：

offset相关宽高：
offsetLeft和offsetTop在不同浏览器中的定义有一定的差别，前边第五个知识点中提到了。
scroll相关宽高：
document.body下是有兼容问题的，火狐浏览器将body当作div进行解析，与chrome浏览器解析出的结果不同，但是在div下没有兼容性问题。
Event对象的五种坐标