js 宽高

【1】window 与 document 区别

 window 对象表示浏览器中打开的窗口，window 对象可以省略

document 对象是window 对象的一部分，浏览器的html 文档成为 document 对象

window.location === document.location；

【2】 各种宽高

(1) window.innerWidth, window.innerHeight , window.outerHeight:, window.outerWidth :

    以上的四个属性兼容 IE9 + 、谷歌  、火狐

outerHeight: height + padding + border ;  innerHeight : height + padding ；  innerWidth =  outerWidth

(2)  window.screen.height , window.screen.width ,

      window.srceen.availHeight , window.screen.availWidth ,

      window.screenTop , window.screenLeft :   

      screen 兼容 IE  、谷歌 、 火狐

screen.width =  window.screen.availWidth ;

window.screenTop +  window.srceen.availHeight =  window.screen.height

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。

 

【3】 document 下的 client  、scroll  、offset 的宽高

（1） clientWidth 与 clientHeight

该元素指的是元素的可视部分的宽高，即 padding + content , 如果没有滚动条，即为元素设定的宽高，若有滚动条，则该属性是其本来的宽高减去滚动条的宽高。

（2） clientLeft 与 clientTop

返回的是元素周围边框  border 的厚度，如果不指定一个边框或不定位该元素，它的值为 0

（3）offsetWidth 与 offsetHeight

 指元素的 border + padding + content

（4）offsetLeft 与 offsetTop

如果父元素没有定位 position ,则 offsetParent 为 body

如果当前元素的父级元素中有 定位，offsetParent 取最近的那个父级元素

（5） scrollWidth 、scrollHeight

body : ( 以下三点只针对 谷歌浏览器)

当给定的宽高小于浏览器窗口，scrollWidth 、scrollHeight 等于浏览器窗口的宽高

当给定的宽高大于浏览器的窗口，且内容小于给定宽高，scrollWidth 、scrollHeight ,scrollWidth包括width + margin + padding + border , scrollHeight 括height + margin + padding

当给定的宽高大于浏览器的窗口，且内容大于给定宽高，scrollWidth 、scrollHeight ,scrollWidth包括 内容width + margin + padding + border , scrollHeight 括 内容 height + margin + padding + border

 

div :

在火狐浏览器，没有body ，而是把body 看做一个 div 来计算其 scrollWidth  与 scrollHeight

【6】 scrollLeft 、scrollTop

这对属 性时可读写的，值得是当元素其中的内容超出其宽高的时候，元素被卷起宽高

【7】 document 与  documentElement 与 body

【8】 event 的五种坐标