clientwidth innerWidth offsetWidth

大家好，又见面了，我是你们的朋友全栈君。

clientWidth 在任何窗口系统中都是指用户内容能放置的空间

clientWidth 是每个 document 一个，一个窗口中可以放置多个 document，比如你用 frame 或 iframe 就可以放置多个 document，这相当于图形界面编程中的 MDI （多文档窗口应用，比如 Word, Excel 就可以同时打开多个文档）。

window.innerWidth能获取当前窗口的宽度(包含滚动条)，当浏览器宽度调整时，这个值也会跟着变化。

window.innerWidth在IE8浏览器是无效的。代替品–>$(window).width()

$(window).width()获取当前窗口的宽度(不包含滚动条).需要引用jquery.js文件，它是jquery方法。

浏览器和屏幕各种高度宽度

Javascript:

屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。

document.documentElement.clientWidth

document.documentElement.clientHeight

document.body.clientWidth     //网页可视区域的宽度(body) 

document.body.clientHeight     //网页body内容的高度(body）  

                                                body的height:100%影响document.body.clientHeight的值

offsetWidth & offsetHeight       本身的宽高 + padding + border + 滚动条

document.body.offsetWidth      //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight     //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth      //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight       //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop          //网页被卷去的Top(滚动条)

document.body.scrollLeft          //网页被卷去的Left(滚动条)

window.screenTop                    //浏览器距离Top

window.screenLeft                    //浏览器距离Left

window.screen.height              //屏幕分辨率的高

window.screen.width                 //屏幕分辨率的宽

window.screen.availHeight         //屏幕可用工作区的高

window.screen.availWidth          //屏幕可用工作区的宽

可视区域的宽，但是包含纵向滚动条的宽度（E8以及以下不支持）

window.innerWidth=width + padding + border + 纵向滚动条宽度 
window.innerHeight = height + padding + border + 横向滚动条高度

可视区域的宽，包含工具条与滚动条窗口的宽度与高度（E8以及以下不支持）

window.outerWidth=width + padding + border + 纵向滚动条宽度       
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度  

$(Window).scrollTop()                     //文档显示区  滚动的高度

(Window).scroll(function(){……}）  //窗口滚动时执行

$().offset()     当前元素距离body  的{top:xxx，left:xxx}

Jquery:

屏幕可视区域的宽高，不包括滚动条与工具条

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

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

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

$(document.body).height(）                //浏览器当前窗口文档body的高度

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

$(document).width()                       //浏览器当前窗口文档对象宽度

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

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

offsetLeft & offsetTop

返回元素的X和Y坐标，相对于已定位元素/相对于文档

scrollWidth & scrollHeight

元素的内容区域+内边距+溢出内容的尺寸.

因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。