原生js和jquery方式获取浏览器的各种高度和宽度(页面width和height)

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。
在获取浏览器宽度的时候，许多时候需要考虑滚动条的存在，一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。
1、原生js获取数据
与body相关的属性

document.body.clientWidth;            //网页可见区域宽
document.body.clientHeight;            //网页可见区域高
document.body.offsetWidth;            //网页可见区域宽，包括边线的宽
document.body.offsetHeight;            //网页可见区域高，包括边线的高
document.body.scrollWidth            //网页正文全文宽
document.body.scrollHeight             //网页正文全文高
document.body.scrollTop             //网页被卷去的高
document.body.scrollLeft             //网页被卷去的左

与window相关的属性

window.outerWidth                   //浏览器宽度，包含了浏览器边框所以这种方式不常用。
window.outerHeight                  //浏览器高度
window.screenTop                     //网页正文部分上
window.screenLeft                    //网页正文部分左 
window.screen.height                 //屏幕分辨率的高
window.screen.width                    //屏幕分辨率的宽 
window.screen.availHeight             //屏幕可用工作区高度
window.screen.availWidth             //屏幕可用工作区宽度

html精确定位

scrollHeight        // 获取对象的滚动高度。 
scrollLeft            //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop            //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth            //获取对象的滚动宽度 

offsetHeight        //获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft            //获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop            //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

event.clientX         //相对文档的水平座标 
event.clientY         //相对文档的垂直座标 
event.offsetX         //相对容器的水平坐标 
event.offsetY         //相对容器的垂直坐标 

document.documentElement.scrollTop     //垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop     //相对文档的水平座标+垂直方向滚动的量

2、通过jQuery获取

$(window).width();                    //浏览器当前窗口可视区域宽度
$(window).height();                    //浏览器当前窗口可视区域高度

$(document).width();                    //浏览器当前窗口文档的宽度
$(document).height();                //浏览器当前窗口文档的高度

$(document.body).width();            //浏览器当前窗口文档body的宽度
$(document.body).height();            //浏览器当前窗口文档body的高度
$(document.body).outerWidth(true)    //浏览器当前窗口文档body的总宽度包括border padding margin
$(document.body).outerHeight(true)    //浏览器当前窗口文档body的总高度包括border padding margin