第76天：jQuery中的寬高

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