最近复习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
暂时我发现的就这些,其余属性都多多少少存在兼容性问题,甚至在部分浏览器称得上是怪异。如果我这儿漏了什么,欢迎大家拍砖!