JS动态解析浏览器和网页的各种宽高属性

还有获取各种宽高属性的公式body{padding:50px;高度：500px；边框：1px红色虚线；溢出：滚动；}span{颜色：蓝色；}

scrollHeight的MDN解释：元素内容高度的度量，包括Invisiblecontentinviewduetooverflow下面我们动态监听它们的变化，添加各种监听事件，监听浏览器大小变化时各种数据的变化规律functionbody_scroll(){console.log(this)console.log(document.body.scrollTop)}window.onload=function(){dataUpdate();}window.onresize=function(){dataUpdate();}window.onscroll=function(){控制台。日志（“window.onscroll”）数据更新（）；}document.body.onclick=function(){dataUpdate();}//浏览器位置改变了之后我们点击body来获取改变使用的原生JS来获取值functiondataUpdate(){varclient_height=document.getElementById("span_client_height");client_height.innerText=document.body.clientHeight||document.documentElement.clientHeight;varclient_width=document.getElementById("span_client_width");client_width.innerText=document.body.clientWidth||document.documentElement.clientWidth;varclient_offsetHeight=document.getElementById("span_client_offsetHeight");client_offsetHeight.innerText=document.body.offsetHeight;varclient_offsetWidth=document.getElementById("span_client_offsetWidth");client_offsetWidth.innerText=document.body.offsetWidth;varclient_scrollHeight=document.getElementById("span_client_scrollHeight");client_scrollHeight.innerText=document.body.scroll身高；varclient_scrollTop=document.getElementById("span_client_scrollTop");client_scrollTop.innerText=document.body.scrollTop;varclient_scrollWidth=document.getElementById("span_client_scrollWidth");client_scrollWidth.innerText=document.body.scrollWidth;varwindow_innerHeight=document.getElementById("span_inner_height");window_innerHeight.innerText=window.innerHeight;varwindow_innerWidth=document.getElementById("span_inner_width");window_innerWidth.innerText=window.innerWidth;varwindow_outerHeight=document.getElementById("span_outer_height");window_outerHeight.innerText=window.outerHeight;varwindow_outerWidth=document.getElementById("span_outer_width");window_outerWidth.innerText=window.outerWidth;varscreen_height=document.getElementById("span_screen_height");screen_height.innerText=window.screen.hei正确；varscreen_width=document.getElementById("span_screen_width");screen_width.innerText=window.screen.width;varscreen_availHeight=document.getElementById("span_screen_availHeight");screen_availHeight.innerText=window.screen.availHeight;varscreen_availWidth=document.getElementById("span_screen_availWidth");screen_availWidth.innerText=window.screen.availWidth;varwindow_top=document.getElementById("span_window_top")window_top.innerText=window.screenTopvarwindow_left=document.getElementById("span_window_left")window_left.innerText=window.screenLeft}我们可以进一步封装，写一个页面宽高检测器使用策略模式。你可以查看http://jianjiacheng.com/brows...