一、window和document的區(qū)別是什么？

• window
  1.window對(duì)象表示瀏覽器中打開(kāi)的窗口。
  2.window對(duì)象可以省略，如:
  alert() 等價(jià)于 window.alert()

• document
  1.document對(duì)象是window對(duì)象的一部分。如：
  document.body 等價(jià)于 window.document.body
  2.瀏覽器的html文檔成為document對(duì)象。

二、window.location和document.location一樣嗎？

• window對(duì)象的location屬性引用的是location對(duì)象，表示該窗口中當(dāng)前顯示文檔的URL。
• document對(duì)象的location屬性也是引用了location對(duì)象。
• 因此
  window.location === document.location //true
  location.herf === window.location.href === document.location.href

三、與window相關(guān)的寬高（不考慮window.document的情況下）

1. window.innerWidth（打開(kāi)窗口的內(nèi)部寬度）與window.outerWidth（打開(kāi)窗口的外部寬度）

   
   
   兩者在此表示一樣的值

2. window.innerHeight（打開(kāi)窗口的內(nèi)部高度）與window.outerHeight（打開(kāi)窗口的外部高度）

   
   
   window的內(nèi)高與外高
   
   

   3.window.screen包含有關(guān)用戶屏幕的信息

• window.screen.height（整個(gè)屏幕的高。。固定值）
• window.screen.width（整個(gè)屏幕的寬。。固定值）
• window.screen.availHeight（可利用的高，即不包括瀏覽器Google屬性欄。。固定值）
• window.screen.availWidth（可利用的寬，與window.screen.width是一樣的。。固定值）
• window.screenTop（瀏覽器頂部距屏幕頂部的距離。。隨瀏覽器的縮放以及位置決定）
• window.screenLeft（瀏覽器左側(cè)距屏幕左側(cè)的距離。。隨瀏覽器的縮放以及位置決定）

window.screen.height與window.screen.availHeight

四、與document相關(guān)的寬高（以document.body為例）

1. 與client相關(guān)的寬高

• document.body.clientWidth
• document.body.clientHeight
• document.body.clientTop
• document.body.clientLeft

clientWidth與clientHeight
1> 該屬性指的是元素的可視部分寬度和高度，即padding + content。
2> 如果沒(méi)有滾動(dòng)條，即為元素設(shè)定的高度和寬度。
3> 如果出現(xiàn)滾動(dòng)條，那么滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高。（注意：mac系統(tǒng)下滾動(dòng)軸不占寬度）
總結(jié)：
假如無(wú)padding無(wú)滾動(dòng)：clientWidth = style.width
假如有padding無(wú)滾動(dòng)：clientWidth = style.width + style.padding＊２　
假如有padding有滾動(dòng)，并且滾動(dòng)軸是顯示的：clientWidth = style.width＋style.padding*2 - 滾動(dòng)軸寬度

clientTop和clientLeft
這兩個(gè)返回的是元素周?chē)吙虻暮穸?，如果不指定一個(gè)邊框或者不定位該元素，它的值就是0.
總結(jié)：
這一對(duì)屬性是用來(lái)讀取元素的border的寬度和高度的。
clientTop = border-top的border-width（邊框像素）
clientLeft = border-left的border-widrh（邊框像素）

2. 與offset相關(guān)的寬高

• document.body.offsetWidth
• document.body.offsetHeight
• document.body.offsetTop
• document.body.offsetLeft

offsetWidth與offsetHeight
1> 這一對(duì)屬性指的是元素的border + padding + content的寬度和高度。
2> 該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(guān)，只和本來(lái)設(shè)定的border以及width和height有關(guān)。
總結(jié)：
假如無(wú)padding 無(wú)滾動(dòng) 無(wú)border：offsetWidth = clientWidth = style.width
假如有padding 無(wú)滾動(dòng) 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth + (border-width)·2
假如有padding 有滾動(dòng) 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth +滾動(dòng)軸寬度 + (border-width)·2

offsetLeft與offsetTop

• 首先先要了解offsetParent這個(gè)屬性：

1> 如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body。
2> 如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級(jí)元素。

• 這兩個(gè)屬性對(duì)于瀏覽器的兼容問(wèn)題：

兼容性

對(duì)照上面的公式，下面的例子可幫助深入理解：

3. 與scroll相關(guān)的寬高

• document.body.scrollWidth
• document.body.scrollHeight
• document.body.scrollTop
• document.body.scrolleft

scrollWidth 與 scrollHeight
注意：document.body的scrollWidth和scrollHeight 與 div中scrollWidth和scrollHeight是有點(diǎn)區(qū)別的。
<1> document.body的scrollWidth和scrollHeight

• 給定寬高小于瀏覽器窗口
  1.scrollWidth通常是瀏覽器窗口的寬度
  2.scrollHeight通常是瀏覽器窗口的高度
• 給定寬高大于瀏覽器窗口，且內(nèi)容小于給定寬高（有border需乘2）
  1.scrollWidth：給定的寬度 + 其所有的padding、margin和border
  2.scrollHeight：給定的高度 +其所有的padding、margin和border
• 給定寬高大于瀏覽器窗口，且內(nèi)容大于給定寬高（給定寬高有border不需乘2）
  1.scrollWidth：內(nèi)容寬度 + 其所有的padding、margin和border
  2.scrollHeight：內(nèi)容高度 + 其所有的padding、margin和border

<2> div的scrollWidth和scrollHeight

• 無(wú)滾動(dòng)軸的情況
  scrollWidth = clientWidth = style.width + style.padding · 2
• 有滾動(dòng)軸時(shí)
  scrollWidth = 實(shí)際內(nèi)容的寬度 + padding · 2
  scrollHeight = 實(shí)際內(nèi)容的高度 + padding · 2

scrollLeft 和 scrollTop（以div為例）
這對(duì)屬性是可讀寫(xiě)的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起的寬度和高度。默認(rèn)都為0 。若改寫(xiě)的話也是可以的改變的。