总结一下,js获取屏幕、视口或者DOM元素高度宽度的方法
屏幕分辨率
window.screen.height
window.screen.width
浏览器的屏幕的可用宽度(不包括任务栏)
window.screen.availWidth
window.screen.availHeight
网页可见区域
document.body.clientWidth
document.body.clientHeight
网页可见区域宽高(加边线)
document.body.offsetWidth
document.body.offsetHeight
网页正文全文宽高
document.body.scrollWidth
document.body.scrollHeight
当前页面滚动条横纵坐标值
纵坐标(横坐标也一样,只是将scrollTop换成scrollLeft,window.pageYOffset换成window.pageXOffset)
document.documentElement.scrollTop //页面具有 DTD,或者说指定了 DOCTYPE 时
window.pageYOffset //低版本IE浏览器不支持
document.body.scrollTop //页面不具有 DTD,或者说没有指定了 DOCTYPE
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //保险办法
获取元素的宽高
document.getElementsByClassName('XXX')[0].offsetWidth
document.getElementsByClassName('XXX')[0].offsetHeight
document.getElementById('XXX').offsetWidth;
document.getElementById('XXX').offsetHeight;