当页面实际内容高度大于浏览器可视区域高度时

a. IE下

b. FF下

当页面实际内容高度小于浏览器可视区域高度时

a. IE下

b. FF下

由此有以下结论

clientHeight

在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

offsetHeight

在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
     在FF下,offsetHeight是页面具体内容的高度

scrollHeight
   
   在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
    在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight

下面是跨浏览器取得当前页面的高度的解决方案(比如创建遮罩层时要用到)

function getPageSize(){
           //检测浏览器的渲染模式
        varbody = (document.compatMode&&document.compatMode.toLowerCase()== "css1compat")?document.documentElement:document.body;

var bodyOffsetWidth = 0;
        var bodyOffsetHeight = 0;
        var bodyScrollWidth = 0;
        var bodyScrollHeight = 0;
        var pageDimensions = [0,0];
      
        pageDimensions[0]=body.clientHeight;
        pageDimensions[1]=body.clientWidth;
      
        bodyOffsetWidth=body.offsetWidth;
        bodyOffsetHeight=body.offsetHeight;
        bodyScrollWidth=body.scrollWidth;
        bodyScrollHeight=body.scrollHeight;

if(bodyOffsetHeight > pageDimensions[0])
        {
            pageDimensions[0]=bodyOffsetHeight;
        }   
      
        if(bodyOffsetWidth > pageDimensions[1])
        {
            pageDimensions[1]=bodyOffsetWidth;
        }    
       
        if(bodyScrollHeight > pageDimensions[0])
        {
            pageDimensions[0]=bodyScrollHeight;
        }    
      
        if(bodyScrollWidth > pageDimensions[1])
        {
            pageDimensions[1]=bodyScrollWidth;
        }

return pageDimensions;
}

IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight的差别相关推荐

  1. 关于JS在IE和FF下attachEvent,addEventListener学习笔记

    今天小弄了一下JS事件,主要说一下FF和IE兼容的问题 对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.att ...

  2. 拖动物体的时候,防止鼠标按下的时候对象突然跳动一下

    拖动物体的时候,防止鼠标按下的时候对象突然跳动一下 $(function() {init(); }); // mouse interaction drag // 拖动物体的时候,防止鼠标按下的时候对象 ...

  3. [已经完美解决]IE下 'document.getElementById(...)' is null

    View Code 1 $.ajax({ 2 type: "POST",//请求方式 3 url: "text.txt",//地址,就是action请求路径 4 ...

  4. 解决ff下JQuery无法监听input的keyup事件

    1 $(document).ready(function(){ 2     $('#news_title').bind('input',fun).bind('keyup',fun); 3 }); 4  ...

  5. textarea在IE中和FF下不同的效果

    如果用textarea的属性字数宽度(cols)和行数(rows)来控制textarea的大小你会发现在,在IE和FF下的每行字数和文字的行数都不相同,而且在字数不足滚动的情况下,IE是默认有滚动条的 ...

  6. CAD 二次开发 图层操作(3)取得指定图层下的所有对象id

    对于CAD二次开发的人来说,可能需要对某一图层下的实体(点,线,面域,块,三维实体)进行不同的操作.下面的方法,即可实现获取指定图层名称下的所有实体ID. 输入参数为图层名称: 返回值为:对象主键集合 ...

  7. Oracle 真的有参数可以 1s 统计完 200G用户下的所有对象么?

    链接:http://blog.itpub.net/28602568/viewspace-1429058/ 标题:Oracle 真的有参数可以 1s 统计完 200G用户下的所有对象么? 作者:lōττ ...

  8. 视频教程-iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化-iOS

    iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化 小码哥教育CEO,曾开发了2个iOS的流行开源框架(MJRefresh.MJExtension),目前在国内的使用率非常高. 李 ...

  9. iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化-李明杰-专题视频课程...

    iOS底层原理班(下)/OC对象/关联对象/多线程/内存管理/性能优化-236人已学习 课程介绍         得遇名师,突飞猛进!iOS培训王者MJ(李明杰)老师精心研发,iOS进阶课程,实用技术 ...

最新文章

  1. lol简介/html
  2. 线程安全与锁优化(思维导图)
  3. 【C++多线程系列】【四】将类的成员函数作为线程启动函数
  4. 软件推荐---站长查询工具
  5. (五)uboot移植补基础之shell
  6. matlab 神经网络dpi,基于DPI和BP神经网络的P2P流量识别研究
  7. 继爱奇艺之后,腾讯视频、优酷宣布:取消剧集超前点播服务
  8. 阿里架构师首次畅谈余额宝背后的故事
  9. python input nameerror_用python写的,运行时出现NameError: name 'raw_input' is not defined 这是什么原因?求解...
  10. cmake安装到指定目录
  11. WebRtc与P2P
  12. 苹果App Store商店中国区如何改为美国区
  13. matlab自带滤波器,matlab自带滤波器函数
  14. 剑指offer题目记录
  15. 将视频分割成多张图片和多张图片生成视频
  16. java程序模拟红篮球概率事件
  17. 数据可视化--实验五:高维非空间数据可视化
  18. iphone忘记锁屏密码却记得appleID密码的不保存数据的刷机办法
  19. p二、使用 docker-compose 安装 Prometheus+Alertmanager+Grafana
  20. 语音识别类产品的分类及应用场景

热门文章

  1. SPSS 探索性因素分析(图文+数据集)【SPSS 033期】
  2. 使用QT5书写的护眼程序
  3. echarts给柱状图某个柱子设置颜色
  4. http响应头和请求头配置对照表
  5. 华为荣耀20青春版能升级鸿蒙吗,荣耀20 Pro系统要不要升级?
  6. 有关球 圆柱 圆锥 的计算
  7. 2022寒假---冲冲冲~
  8. 车辆调度 数学建模c语言,2019数学建模国赛C题–机场的出租车调度问题
  9. 涉外资(外商)公司股权转让有关问题答疑
  10. 【Proteus仿真】Arduino UNO+uln2003驱动步进电机+按键启保停正反转控制