[JS] Window 物件和 Element 相關定位

發表於 | 分類於 | |

部分 window 物件屬性，及 Element 的 position 相關屬性整理。

window 物件

特性 說明
window.innerHeight 視窗的高度 (不包括 chrome 瀏覽器/ 使用者操作介面部分 )
window.innerWidth 視窗的寬度 (不包括 chrome 瀏覽器/ 使用者操作介面部分 )
window.outerHeight 視窗的高度 (包括 chrome 瀏覽器/ 使用者操作介面部分 )
window.innerWidth 視窗的寬度 (包括 chrome 瀏覽器/ 使用者操作介面部分 )
window.pageXOffset 網頁文件水平捲動的距離 ( 和 window.scrollX 是一樣的，需跨瀏覽器時建議使用 pageXOffset)
window.pageYOffset 網頁文件垂直捲動的距離 ( 和 window.scrollY 是一樣的，需跨瀏覽器時建議使用 pageYOffset)
window.screenX 滑鼠的 X 座標，相對於螢幕的左上角
window.screenY 滑鼠的 Y 座標，相對於螢幕的左上角
window.location window 物件目前的頁面 URL (或本機路徑)
window.document 參考至 document 物件，用以代表目前的頁面內容
window.history 參考至 history 物件，用以擷取瀏覽器視窗或頁籤所包含的瀏覽紀錄資訊
window.history.length history 物件中的瀏覽紀錄筆數
window.screen screen 物件

window.innerHeight vs window.outerHeight


圖片來源: https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight

screen 物件

特性 說明
screen.width 使用者的螢幕寬度
screen.height 使用者的螢幕高度
screen.availWidth 使用者的螢幕寬度剪掉系統的控制列
screen.availHeight 使用者的螢幕寬度剪掉系統的控制列
screen.colorDepth the number of bits used to display one color
screen.pixelDepth the pixel depth of the screen

ps. For modern computers, Color Depth and Pixel Depth are equal.

Element 在頁面中的位置

特性 說明
HTMLElement.offsetParent 回傳目前元件計算 offset 的祖先元件
HTMLElement.offsetTop 距離最近的祖先節點頂端的距離
HTMLElement.offsetLeft 距離最近的祖先節點左邊的距離
HTMLElement.offsetHeight 元素高度 (包括垂直 padding 和 border，若該元素有水平 scrollbar 也會算進去)
HTMLElement.offsetWidth 元素寬度 (包括垂直 padding 和 border，若該元素有垂直 scrollbar 也會算進去。)
Element.clientHeight 元素寬度，包括padding (不包括垂直 border 和 margin，若該元素有垂直 scrollbar 不會算進去。)
Element.clientWidth 元素寬度，包括padding (不包括水平 border 和 margin，若該元素有垂直 scrollbar 不會算進去。)

參考資料