【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 的五种坐标