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

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. imx6q 添加intel PCIE网卡

    TQ_IMX6Q开发板移植rtl8168-PCIE转千兆网卡 一.配置内核选项PCIE总线驱动支持 默认的内核配置可能没有把PCIE的总线驱动编入内核,所以需要确认是否把驱动编译到了内核里面. 配置好 ...

  2. DNS 缓存机制原理

    DNS 缓存机制原理 简单来说,一条域名的DNS记录会在本地有两种缓存:浏览器缓存和操作系统(OS)缓存.在浏览器中访问的时候,会优先访问浏览器缓存, 如果未命中则访问OS缓存,最后再访问DNS服务器 ...

  3. 跨平台移动开发_Windows 8平台使用 PhoneGap 方法

    原文地址: Using PhoneGap in Windows 8 Store Applications 下载phonegap 2.9.1 下载地址: https://codeload.github. ...

  4. Qt使用QCustomPlot开发

    一.入门 1.下载源文件http://www.qcustomplot.com/: 2.把.cpp和.h放在工程目录下,并将cpp和h加入工程: 3.在.pro中:QT += printsupport: ...

  5. Eclipse SVN插件设置

    项目开发中,开发人员用SVN来管理代码,在和服务器同步时,需要避免上传不必要的一些编译文件,如.class,.log,target等文件,这里需要设置同步选项. 打开Eclipse ---> W ...

  6. 谈谈 cci 与 i2c

    cci的名字叫, camera control interface, 他由两部分组成,一是i2c ,而另一个部分是 gpio.也就是说,cci 包含i2c.一般情况下,我们只是用到了i2c 部分,没有 ...

  7. Linux 修改DNS解决 Could not retrieve mirrorlist" 报错

    CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置 或者IP配置文件上写入 缺少DNS引起的问题1. 无法识别域名 ...

  8. AJAX跨域资源共享 CORS 详解

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  9. streambase log(log4j和logback)

    需要注意的是:当streambase servce 由window service 方式启动时,logback日志机制就不起作用了需要做下配置处理 https://support.tibco.com/ ...

  10. Spark性能优化指南--基础篇

    前言 开发调优 调优概述 原则一:避免创建重复的RDD 原则二:尽可能复用同一个RDD 原则三:对多次使用的RDD进行持久化 原则四:尽量避免使用shuffle类算子 原则五:使用map-side预聚 ...