[JS] 一堆 width / height

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

在寫 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

  • 翻到你這一篇,目前正在寫相關的東西。
    確實相當同意,他們在搞什麼鬼啊….

  • document.body.scroll{Width, Height}
    IE: body 的大小,若無特別指定,寬會隨著瀏覽器的可視區域更改。
    FF, Opera, Safari: 若可視區域 小於 body 大小,則是 body 大小,否則是可視區域大小。

    document.body.scrollWidth 是這樣用嗎?
    那個body的大小是什麼意思呢?
    有例子嗎><?