一堆 width / height

(引用 https://blog.ericsk.org/archives/776#more-776)

記錄一下，以後可以方便自己查詢。

在寫 JavaScript 時最煩的就是計算畫面或是頁面的大小，但是每家瀏覽器提供的內容都不太一樣，所以我就針對幾個瀏覽器（IE, Firefox, Safari, Opera）共同支援的 attr 來寫個簡單的 cheat sheet：

• document.body.client{Width, Height}
  用來取得目前瀏覽器視窗內頁面區域的 width, height，也就是不含工具列的部份。
• document.body.offset{Width, Height}
  IE, Opera, Safari: 瀏覽器可視區域大小（同 clientWidth）。
  FF: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
• document.body.scroll{Width, Height}
  IE: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
  FF, Opera, Safari: 若可視區域 小於 body 大小，則是 body 大小，否則是可視區域大小。
• document.documentElement.client{Width, Height}
  IE: (0, 0)
  FF, Opera, : body 的大小。
  Safari: 可視區域大小。
• document.documentElement.offset{Width, Height}
  IE, Safari: 可視區域大小。
  FF, Opera: body 大小。
• document.documentElement.scroll{Width, Height}
  IE: 可視區域大小。
  FF, Opera, Safari: 同 document.body.scroll{Width, Height}

看起來，大家都自己 implement 得很開心嘛…完全找不到規則 Orz

• javascript