document相关的宽高

Posted yyy_鸳鸯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了document相关的宽高相关的知识,希望对你有一定的参考价值。

一、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

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

 

 

以上是关于document相关的宽高的主要内容,如果未能解决你的问题,请参考以下文章

JS中的宽高(基础知识很重要)

javascript窗口宽高

各种宽高

页面宽高

屏幕各种宽高

第76天:jQuery中的宽高