JS 相關寬高理解

window 相關寬高

屬性	意義
window.innerWidth	瀏覽器窗口內部寬度
window.innerHeight	瀏覽器窗口內部高度
window.outerWidth	瀏覽器寬度（包含菜單欄、開發者工具等）
window.outerHeight	瀏覽器高度（包含菜單欄、開發者工具等）
window.screen.width	屏幕寬度
window.screen.height	屏幕高度
window.screen.availWidth	屏幕的可以使用寬度
window.screen.availHeight	屏幕的可以使用高度
window.screenTop	瀏覽器窗口距屏幕頂部的距離
window.screenLeft	瀏覽器窗口距屏幕左側的距離

document 相關寬高

client 相關

屬性	意義
clientWidth	元素的可視部分寬度（padding + content）
clientHeight	元素的可視部分高度（padding + content）
clientTop	元素上邊框的寬度（boder-top）
clientLeft	元素左邊框的寬度（boder-left）

注意

元素若是有滾動軸，clientWidth 和 clientHeight 不包含滾動軸寬度。

offset 相關

屬性	意義
offsetWidth	（border + padding + content）
offsetHeight	（border + padding + content）
offsetTop	距離 offsetParent 的元素的頂部的距離
offsetLeft	距離 offsetParent 的元素的左邊的距離

scroll 相關

屬性	意義
scrollWidth	給定寬度小於瀏覽器窗口 => 瀏覽器窗口的寬度; 給定寬度大於瀏覽器窗口，且內容小於給定寬度 => 給定width + padding + border + margin 給定寬度大於瀏覽器窗口，且內容大於給定寬度 => content.width + padding + border + margin
scrollHeight	給定高度小於瀏覽器窗口 => 瀏覽器窗口的高度; 給定高度大於瀏覽器窗口，且內容小於給定高度 => 給定height + padding + border + margin 給定高度大於瀏覽器窗口，且內容大於給定高度 => content.height + padding + border + margin
scrollTop	元素其中的內容超出其寬高的時候，元素被捲起來的寬度和高度
scrollLeft	元素其中的內容超出其寬高的時候，元素被捲起來的寬度和高度

參考

《JS/jQuery寬高的理解和應用》