Javascript 获取页面高度、宽度(多种浏览器)
- //关于获取各种浏览器可见窗口大小的一点点研究。
-
- //在我本地测试当中:
- //在IE、FireFox、Opera下都可以使用
- document.body.clientWidth
- document.body.clientHeight
- //即可获得,很简单,很方便。
- //而在公司项目当中:
- //Opera仍然使用
- document.body.clientWidth
- document.body.clientHeight
- //可是IE和FireFox则使用
- document.documentElement.clientWidth
- document.documentElement.clientHeight
- //原来是W3C的标准在作怪啊
- //http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- //如果在页面中添加这行标记的话
-
- //在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的标准,则
- //IE为:
- document.documentElement.clientWidth ==> 0
- document.documentElement.clientHeight ==> 0
- //FireFox为:
- document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
- //Opera为:
- document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
- //真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
复制代码 |