document相关的宽高

Posted 2020-09-30 yyy_鸳鸯

一、client该属性指的是元素的可视部分的宽度和高度，即padding+content

如果没有滚动条，即为元素设定的宽度和高度。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来的宽高减去滚动条的宽高。

1.document.body.clientWidth/document.body.clientHeight

（1）假如没有padding，无滚动，则clientWidth = style.width

（2）假如有padding，无滚动，则cliengWidth = style.width + style.padding*2

（3）假如有padding，有滚动，则clientWidth = style.width + style.padding*2-滚动轴的宽度

2.document.body.clientLeft/document.body.clientTop

这两个返回的是元素周围边框的厚度，如果不指定一个边框挥着不定位该元素，则值为0，

用于读取border的宽度和高度

 

 

二、offset

1.document.body.offsetWidth/document.body.offsetHeight

该属性指的是元素的border+padding+content的宽度和高度

该属性和其内部的内容是否超出元素大小无关，只和本来设定的border,width,height有关。

offsetWidth = clientWidth + clientLeft*2

2.offsetParent

若当前元素的父级元素没有进行CSS定位（absolute或relative），offsetParent为body。

若父级元素有CSS定位，则offsetParent为最近的父级元素。

2.document.body.offsetLeft/document.body.offsetTop

在IE8以上的浏览器以及chrome中：offsetleft = offsetParent的（margin-left+border-left+padding-left)+当前元素的（margin-left）

在firefox中：offsetleft = offsetParent的（margin-left+padding-left)+当前元素的（margin-left）

 

 

三、scroll

1..document.body.scrollWidth/document.body.scrollHeight

document.body的scrollWidth和scrollHeight与div的scrollWidth/scrollHeight有区别

对于document.body的scrollWidth和scrollHeight

（1）给定的宽高小于浏览器的宽高，则scrollWidth/scrollHeight = 浏览器的宽高

（2）给定的宽高大于浏览器的窗口，且内容小于给定的宽高

document.body.scrollWidth = 给定的宽度+其所有的padding*2+margin*2+border*2

document.body.scrollHeight = 给定的高度+其所有的padding*2+margin*2+border*2

（3）给定的宽高大于浏览器的窗口，且内容大于给定的宽高

document.body.scrollWidth = 其内容的宽度+其所有的padding*2+margin*2+border*2

document.body.scrollHeight = 其内容的高度+其所有的padding*2+margin*2+border*2

对于div的scrollWidth/scrollHeight

（1）无滚动轴时：

div.scrollWidth = 给定的宽度 + padding*2

div.scrollscrollHeight = 给定的高度 + padding*2

（2）有滚动轴时

div.scrollWidth = 实际的宽度 + padding*2

div.scrollscrollHeight = 实际的高度 + padding*2

2.document.body.scrollLeft/document.body.scrollTop

该属性是可读写的，指的是当元素其中的内容吃哦出宽高的时候，元素被卷起的高度和宽度。