clientWidth

先说 宽度 clientWidth、scrollWidth、offsetWidth参见 http://www.w3school.com.cn/jsref/dom_obj_all.asp clientWidth ：可见宽度，包括元素的内容区，就是最里面那部分，包括padding，不包括magin，不包括border，不包括滑动条； 备注：background-color包括元素的内容区、padding、border，也就是比clientWidth涉及区域多了一个border。 scrollWidth ：可以滚动的clientWidth； offsetWidth ：不包括magin，其他都包括； 注：这里offsetWidth包括滚动条的宽度，但是和scrollWidth不太一样，scrollWidth的是实际内容的宽度，就是将滑块滑动走过的宽度；而offsetWidth包括滚动条的宽度，不是滚动区域。 width ：就是你style给的width，不过有一个奇怪的地方，当打印style.width的时候，只对内联样式，且必须写成style = "width:某某px"的有用，能打印出来，其他的打印出来的都是空字符串。不知为何，好奇怪。 至于高度，和宽度一样的啦，对号入座就ok。 来源： oschina 链接： https://my.oschina.net/u/1165741/blog

IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中： document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 没有定义W3C的标准，则

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"; s = " 网页正文全文宽：" document.body.scrollWidth; s = " 网页正文全文高：" document.body.scrollHeight; s = " 网页被卷去的高(ff)：" document.body.scrollTop; s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop; s = " 网页被卷去的左：" document.body.scrollLeft; s = " 网页正文部分上：" window.screenTop; s = " 网页正文部分左：" window.screenLeft; s = " 屏幕分辨率的高：" window.screen

CSSOM 指 CSS Object Model ，即 CSS对象模型 。CSSOM 是 JavaScript 操纵 CSS 的一系列 API 集合，它属是 DOM 和 HTML API 的附属。 其中视图模型（View Model）中定义了一系列接口，包括多个关于窗体、文档和元素的位置尺寸信息，特别容易混淆。 Window 接口 innerWidth/innerHeight 浏览器窗口可见区的高宽，包括滚动条。 outerWidth/outerHeight 浏览器窗口的外边沿宽高。 scrollX/scrollY 文档水平/垂直滚动量。 pageXOffset/pageYOffset 同上。 screenX/screenY 浏览器左上角距离屏幕左上角的距离。 Screen 接口 availWidth/availHeight 屏幕可用区域的尺寸。 width/height 屏幕整体尺寸。 Element 接口 clientWidth/clientHeight 元素本身尺寸，包括 padding，但不包括 border、margin 和 scroll。 因此一个设置了 width:100px 的元素出现宽度为 15px 的覆盖式滚动条后，它的 clientWidth 为 85px。 一些浏览器的滚动条是半透明的，并允许覆盖页面元素，这种情形下，clientWidth 为 100px。