第76天：jQuery中的宽高

Posted 2020-10-13 半指温柔乐

Window对象和document对象的区别

1、window对象表示浏览器中打开的窗口

2、window对象可以省略，比如alert()也可以写成window.alert()

Document对象是window对象的一部分

浏览器的html文档成为dicument对象

 

Window.location和document.location

Window对象的location属性饮用的是location对象，表示该窗口中当前显示文档的URL

Document对象的location属性也是引用了location属性也是引用了location对象

Window.location===document.location//true

 

与window相关的宽高介绍

Window.innerWidth//浏览器窗口的内部宽度

.innerHeight//浏览器窗口的内部高度

.outerWidth

.outerHeight

 

Window.screen包含用户屏幕相关信息

.screen.height

.screen.width

.screen.availHeight

.screen.availWidth

Window.screenTop

Window.screenLeft

 

与document相关的宽高介绍

1、Client

document.body.clientWidth和document.body.clientHeight

指元素的可视部分宽度和高度，即padding+content.

若没有滚动条，即为元素设定的宽高

若有滚动条，则为原来宽高减去滚动条的宽高

无padding无滚动：clientWidth=style.width

有padding无滚动：clientWidth=style.width+style.padding*2

有padding有滚动：clientWidth=style.width+style.padding*2-滚动条宽度

document.body.clientLeft和document.body.clientTop

指元素周围边框的厚度，如果不指定边框或不定位元素，值为0

clientTop=border-top的border-width

clientLeft=border-left的border-width

 

2、Offset

offsetWidth和offsetHeight

指元素的border+padding+content的宽度和高度

该属性和内部的内容是否超出元素大小无关，只和设定的border以及width和height有关

无padding无滚动无border

offsetWidth=clientWidth=style.width

有padding无滚动条有border

offsetWidth=clientWidth+border宽度*2=style.width+style.padding*2+(border-width)*2

有padding有滚动条有border

offsetWidth=style.width+style.padding*2+(border-width)*2=clientWidth+滚动轴宽度+border宽度*2

 

offsetLeft和offsetTop

如果当前元素的父元素没有定位，则offsetParent为body

如果有定位，offsetParent取最近的父元素

 

3、Scroll

scrollWidth和scrollHeight

如图

scrollTop

scrollLeft