第76天：jQuery中的宽高

窗口对象和文档对象的区别

1，窗口表示对象浏览器中打开的窗口显示

2，窗口对象可以省略，比如警报（）也可以写成window.alert（）

文档对象是窗口的对象一部分

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

 

window.location的和document.location

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

文档对象的位置属性也是引用了位置属性也是引用了位置对象

window.location的=== document.location //真

 

与窗口相关的宽高介绍

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

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

.outerWidth

.outerHeight

 

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

.screen.height

.screen.width

.screen.availHeight

.screen.availWidth

Window.screenTop

Window.screenLeft

 

与文档相关的宽高介绍

1，客户端

document.body.clientWidth和document.body.clientHeight

指元素的可视部分宽度和高度，即填充+含量。

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

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

无填充无滚动：clientWidth = style.width

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

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

document.body.clientLeft和document.body.clientTop

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

clientTop =边框顶的边框宽度

clientLeft =左边框的边框宽度

 

2，柯式

offsetWidth和的offsetHeight

指元素的边框+填充+内容的宽度和高度

该属性和内部的内容是否超出元素大小无关，只和设定的边界以及宽度和高度有关

无填充无滚动无边界

offsetWidth = clientWidth = style.width

有填充无滚动条有边界

offsetWidth = clientWidth +边界宽度×2 = style.width + style.padding * 2 +（边框宽度）* 2

有填充有滚动条有边界

offsetWidth = style.width + style.padding * 2 +（边框宽度）* 2 = clientWidth +滚动轴宽度+边界宽度* 2

 

offsetLeft和的offsetTop

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

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

 

3，滚动

scrollWidth和scrollHeight属性

如图

scrollTop的

scrollLeft