这主要是针对火狐浏览器来讲的：

height:就是div的高度，就是style中设置的高度；在chrome中clientHeight是包含padding的，offsetHeight和clientHeight差不多，而scrollHeight则是滚动条滚动的高度，

可以用这个例子来查看区别：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style >

        #a{

            height:100px;

            width:100px;

            overflow:auto;

            margin:20px;

            padding:20px;

        }

    </style>

    <script>

        window.onload = function () {

            var a = document.getElementById("a");

            a.onmouseover = function () {

                alert(getStyle(a,'height'));

                alert(a.clientHeight);

                alert(a.offsetHeight);

                alert(a.scrollHeight);

            }

        }

        function getStyle(obj,attr){

            if(obj.currentStyle){

                return obj.currentStyle[attr];

            }else{

                return getComputedStyle(obj,false)[attr];

            }

        }

    </script>

</head>

<body>

<div class="div" id="a">

发生的飞洒发射发的说法是飞洒的范德萨发水电费我发生地方发士大夫撒旦飞洒地方撒发生法撒旦法师打发说法是否违法违法

</div>

</body>

</html>

clientHeight:一般情况下和height是一样的，如果div有滚动条，在没有padding的情况下clientHeight = height - 滚动条的高度；

var w= document.documentElement.clientWidth

      || document.body.clientWidth;

var h= document.documentElement.clientHeight

      || document.body.clientHeight;

scrollHeight:就是clientHeight + border + 滚动条的高度；其实也可以理解为height + border;//height是不包含border和padding的，

var w=document.documentElement.scrollWidth

   || document.body.scrollWidth;

var h=document.documentElement.scrollHeight

   || document.body.scrollHeight;

offsetHeight:在火狐浏览器中offsetHeight是和scrollHeight一样的

var w= document.documentElement.offsetWidth

    || document.body.offsetWidth;

var h= document.documentElement.offsetHeight

    || document.body.offsetHeight;

height clientHeight scrollHeight offsetHeight的大致区别的更多相关文章

  1. clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

    clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...

  2. clientHeight—scrollHeight—offsetHeight三者的区别

    clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...

  3. clientHeight , scrollHeight , offsetHeight之间的区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  4. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  5. clientHeight scrollHeight offsetHeight

    <div  style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...

  6. clientHeight / scrollHeight / offsetHeight 等属性的区别图

    网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...

  7. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  8. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

  9. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

随机推荐

  1. PHP扩展模块Pecl、Pear以及Perl的区别

    一.简短总结:pear:一个书写的比较规范,国外较流行的工具箱代码集pecl:php扩展包,但不属于php基本扩展范围perl:一种早于php出现的脚本级语言,php借鉴了他的正则表达式部分 二.Pe ...

  2. 20165101 实验一 Java开发环境的熟悉

    #20165103 实验一 Java开发环境的熟悉 实验报告 封面 实验要求 第一部分 1.建立"自己学号exp1"的目录 2.在"自己学号exp1"目录下建立 ...

  3. [C++] 麻将胡牌算法

    麻将的玩法规则众多,核心的玩法是一致的,本文将根据联发科2017年编程挑战赛的复赛题规则来实现. 牌的表示方式 ABCDEFGHI代表一到九萬,abcdefghi代表一到九条,123456789代表一 ...

  4. RazorEngine性能研究(反射的延深)

    先说下结论 1)RazorEngine 确实很慢,编译过程特别慢,编译过后仍不适合大量重复调用的情况(一次调用可以接受). 2 )   RazorEngine 和 asp.net mvc 里的Razo ...

  5. centos_mysql5.6.21_rpm安装

    1.查看操作系统相关信息.[root@linuxidc ~]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m [root@l ...

  6. mybaties mapping中if

    mapping中 if的简单使用 <insert id="addPassenger" resultMap="EmpResultMap" parameter ...

  7. springmvc中url-url-pattern /和/*的区别

    在使用springmvc时,都会在web.xml中配置一个dispatchservlet,如下: <listener> <listener-class> org.springf ...

  8. linux基础（5）-用户及权限

    用户与组 用户:使用linux时,需要以用户的身份登陆 组    :用来方便组织管理用户   用户种类 -root用户(ID为0的用户为root用户) -系统用户(1-499) -普通用户(500以上 ...

  9. django学习笔记整理（2）django的路由系统

    创建一个属于你的django框架.django-admin startproject 框架名 打开你的django框架,你会发现里面还有一个和框架名同名的文件夹,那个文件夹就称为一个app. 创建了d ...

  10. Qt QSortFilterProxyModel示例代码， 使用方法

    1. QSortFilterProxyModel不能单独使用,它只是一个"代理",真正的数据需要另外的一个model提供,而且它是用来排序和过滤的. 2. 实现代码 #ifndef ...