要获得不同宽度和高度的属性，还有表达式
body {
padding: 50px；
height: 500px；
border: 1px蓝色咖啡豆red；
overflow :滚动；
}
span {
颜色：蓝；
}
可视区域高度document.body.clientheight=height padding *2-滚动条宽度测试文本12页可视区域宽度document.body.clientwidth=width padding 2-滚动条宽度测试文本12 body的总高度document.body.offsetheight=height border *2padding *2=clientheight滚动条宽度边框宽度* 2测试文本12 body总宽度document.body.offsetwidth=width border *2padding *2=clientwidth滚动条宽度边框宽度*2测试文本12 scroller
总高度document.body.scrollHeight测试的文本12滚动高度document.body.scrollTop测试的文本12滚动总宽度document.body.scrollWidth测试工具栏、调试窗口(可变)不包含window.innerHeight测试的文本12浏览器的可显示窗口宽度。 边框)不包含window.innerWidth测试的文本12浏览器窗口的宽度。 滚动条和边框)包含window.outerHeight测试的边框，工具栏(可变)包含window.outerWidth测试的文本12屏幕物理分辨率高(不变) window.screen.heigen window.screen.width=window.screen.availheight windows左右任务栏上测试的文本12浏览器窗口的可用高度。 windows任务栏(变量)不包含在window.screen.availheight中测试的文本；不包含windows任务栏(变量) window.screen.availWidth测试的文本eenTop测试文本12浏览器窗口距离显示器底部的高度)可变) window.screenLeft测试文本12
现在，动态监视那些变化吧
添加各种接收事件，以接收浏览器调整大小时各种数据变化
功能body _ scroll
是console.log(this )
console.log (document.body.scroll top ) )。
}
window.onload=function (
数据更新(；
}
window.onresize=function (
数据更新(；
}
window.onscroll=function
console.log(window.onscroll ) )。
数据更新(；
}
document.body.onclick=function {
数据更新(；
//浏览器位置发生变化后，单击body获取变化
使用本地JS检索值
函数数据更新
var client _ height=document.getelementbyid (span _ client _ height )；
client _ height.innertext=document.body.clientheight|| document.documentelement.clientheight；
var client _ width=document.getelementbyid (span _ client _ width )；
client _ width.innertext=document.body.client width|| document.documentelement.client width；
var client _ offsetheight=document.getelementbyid (span _ client _ offsetheight )；
client _ offsetheight.innertext=document.body.offsetheight；
var client _ offsetwidth=document.getelementbyid (span _ client _ offsetwidth )；
client _ offsetwidth.innertext=document.body.offsetwidth；
var client _ scrollheight=document.getelementbyid (span _ client _ scrollheight )；
client _ scroll height.innertext=document.body.scroll height；
var client _ scroll top=document.getelementbyid (span _ client _ scroll top )；
client _ scroll top.innertext=document.body.scroll top；
var client _ scroll width=document.getelementbyid (span _ client _ scroll width )；
client _ scroll width.innertext=document.body.scroll width；
var window _ innerheight=document.getelementbyid (span _ inner _ height )；
window _ innerheight.innertext=window.innerheight；
var window _ inner width=document.getelementbyid (span _ inner _ width )；
window _ inner width.innertext=window.inner width；
var window _ outer height=document.getelementbyid (span _ outer _ height )；
window _ outer height.innertext=window.outer height；
var window _ outer width=document.getelementbyid (span _ outer _ width )；
window _ outer width.innertext=window.outer width；
var screen _ height=document.getelementbyid (span _ screen _ height )；
screen _ height.innertext=window.screen.height；
var screen _ width=document.getelementbyid (span _ screen _ width )；
screen _ width.innertext=window.screen.width；
var screen _ availheight=document.getelementbyid (span _ screen _ availheight )；
screen _ availheight.innertext=window.screen.availheight；
var screen _ availwidth=document.getelementbyid (span _ screen _ availwidth )；
screen _ availwidth.innertext=window.screen.availwidth；
var window _ top=document.getelementbyid (span _ window _ top ) )
window _ top.innertext=window.screentop
var window _ left=document.getelementbyid (span _ window _ left ) )。
window _ left.innertext=window.screen left
}
您可以进一步封装并在策略模式下编写页面宽度和高度检测器