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宽高的理解和应用》