涵盖知识点：
1、获取屏幕相关信息
2、获取网页，文档相关信息
3、获取元素相关信息
4、DTD声明对document.body.clientHeight与document.documentElement.clientHeight的影响
5、DTD声明对document.body.scrollTop与document.documentElement.scrollTop的影响
一、获取屏幕相关信息
获取屏幕有效高度(不包括界面特性，比如任务栏等)：window.screen.availHeight
获取屏幕有效宽度：window.screen.availWidth
获取屏幕分辨率高：window.screen.height
获取屏幕分辨率宽： window.screen.width
二、js获取网页相关信息
获取body的宽度（包括padding），当body不超过网页可见区域时，获取到的宽度是不包含滚动条的网页可见区域宽度：document.body.clientWidth
获取body宽度（包括padding, border）, 当body宽度小于网页可见区域时，获取到的时不包含滚动条的网页可见区域宽度：document.body.offsetWidth
获取网页可见区域(包括滚动条)：window.innerWidth // ie8以下不支持
获取浏览器窗口可见区域（包括任务栏，调试界面等）：window.outerWidth //ie8以下不支持
网页正文全文宽（包括padding）: document.body.scrollWidth
浏览器窗口相对于屏幕的x,y坐标：window.screenLeft和window.screenTop
三、获取元素相关信息
元素高度：el.clientWidth // 包括padding
el.offsetWidth // 包括padding, border
当子元素超出父元素，父元素显示滚动条时，子元素高度（包括padding）：el.scrollHeight
元素向上滚动的距离：el.scrollTop
当前元素顶部距最近父元素顶端的距离：el.offsetTop
四、DTD对document.body.clientHeight与document.documentElement.clientHeight的影响
document.body获取到body节点
document.documentElement获取到html节点
当声明了DTD时：
document.body.clientHeight获取到的是body的高度，并不是浏览器可见区域的高度
document.documentElement.clientHeight获取到的是浏览器可见区域的高度
当没有声明DTD时：
document.body.clientHeight获取浏览器可见区域的高度
document.documentElement.clientHeight获取到的是body的高度
当设置了html,body{height: 100%}时，这两个值才相等
当你声明了DTD时，可以安全的使用document.documentElement.clientHeight获取浏览器可视区域的高度
五、DTD对document.body.scrollTop与document.documentElement.scrollTop的影响
当声明了DTD时：
document.body.scrollTop获取到的永远是0
document.documentElement.scrollTop获取到的是滚动的高度
当没有声明DTD时：
document.body.scrollTop获取到的是滚动的高度
document.documentElement.scrollTop获取到的永远是0
兼容性写法document.documentElement.scrollTop || document.body.scrollTop
网友评论