首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

  • 技术部落
  • 部落首页 > 网络编程 > JavaScript > 正文
  • Javascript 获取页面高度(多种浏览器)
      2008-5-20  来源:博客园  编辑:Jsbulo  热度:

    关于获取各种浏览器可见窗口大小的一点点研究。

    在我本地测试当中:

    在IE、FireFox、Opra下都可以使用

    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高)
    真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。