关于JS获取各种尺寸的注意事项

最近复习JS，在写一些JS动态设置布局的时候，不是很得心应手，原因是对各个浏览器对尺寸的控制属性不了解。所以今天在这里做一番调查：

首先贴出我的例子：

Chrome:



safari:



firefox:



IE6:



其中chrome和firefox是在分辨率为1366*768下测试的，而safari和IE6由于是在虚拟机中，所以用的是1024*768的分辨率。

在上面的图片中，我们是可以看出一些问题的：

1.哪些属性是所有浏览器都支持的——当然是那些在所有浏览器中都没有显示undefined的啦

2.哪些属性是我们真正用得上的。

3.哪些属性是我们需要注意去兼容的。

在这里我首先说第三点吧，因为最近做一个小demo 的时候发现，chrome虽然支持document.documentElement.scrollTop的属性，但是真正使用的时候它的值居然为0。的确有点匪夷所思，这在一些标准浏览器中是不存在的。而在chrome下我们只能通过document.body.scrollTop去获取页面卷去的高度。所以在这里我们需要做一些兼容，当我们要获取页面卷去的高度的时候，可以这样定义：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

在这里，window.pageYOffset的属性是safari支持的属性，借鉴的是别人的写法，具体是哪位兄台的现在无从考证了

再到第二点——哪些属性我们可以放心使用：

在这里我就不废话了，直接写答案，证据将看图吧：

1.document.body.clientHeight/clientWidth

2.document.body.offsetHeight/offsetWidth

3.screen.width/height

4.screen.availHeight/Width

5.document.documentElement.scrollHeight/Width

6.document.documentElement.clientHeight/Width

暂时我发现的就这些，其余属性都多多少少存在兼容性问题，甚至在部分浏览器称得上是怪异。如果我这儿漏了什么，欢迎大家拍砖！