前言：jquery 对象的 height、innerHeight、outerHeight，还有 DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 概念一直都很模糊，借此写个demo看看。

举例看看 jquery 对象的 height、innerHeight、outerHeight 几个区别：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>

<head>

    <title>测试</title>

    <style>

        #div1{

            border: 1px solid;

            height: 200px;

            width: 200px;

            padding: 10px;

            margin: 20px;

            /*浮动*/

            overflow: auto;

        }

    </style>

</head>

<body>

<div id="div1">

    <div>sdf</div>

    <div>地方</div>

    <div>水电费</div>

    <div>史蒂夫</div>

    <div>鬼地方个</div>

    <div>史3玩儿</div>

    <div>史3水电费玩儿</div>

    <div>212</div>

    <div>435 </div>

    <div>电饭锅</div>

    <div>规划局</div>

    <div>好久</div>

    <div>水电费</div>

    <div>史3水电费玩儿</div>

    <div>34</div>

    <div>的</div>

    <div>45</div>

    <div>sdf</div>

    <div>地方</div>

    <div>水电费</div>

    <div>史蒂夫</div>

    <div>鬼地方个</div>

    <div>史3玩儿</div>

    <div>史3水电费玩儿</div>

    <div>212</div>

    <div>435 </div>

    <div>电饭锅</div>

    <div>规划局</div>

    <div>好久</div>

    <div>水电费</div>

    <div>史3水电费玩儿</div>

    <div>34</div>

    <div>的</div>

    <div>45</div>

</div>

<script type="text/javascript" src="${ctx}/static/common/js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

    var $div = $("#div1");

    //262 222 220 200

    console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

    var div = $div[0];

    //220 222 734 20 0

    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

</script>

</body>

</html>
//262 222 220 200

console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

outerHeight 高度为：元素自身高度 + padding + border ；如果参数为true时，高度为：元素自身高度 + padding + border +margin

innerHeight 包括元素自身的高度+padding部分

height 指的是元素本身的高度，不包括padding、border、margin

然后看看 DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 区别

每个HTML元素都具有 clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个属性，这些是和元素高度、滚动、位置相关的属性。其中 clientHeight、offsetHeight 和元素的高度有关，scrollHeight、scrollTop 与滚动有关，offsetTop与父元素有关。

var div = $div[0];

    //220 222 734 20 0

    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

参考：http://www.imooc.com/article/17571 

 

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的更多相关文章

  1. Jquery中的height(),innerHeight(),outerHeight()的区别

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  2. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  3. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

  4. 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法

    资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...

  5. height/innerHeight/outerHeight

    <script> $(document).ready(function(){ alert("height:"+$("#div").height()) ...

  6. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  7. offsetheight 和clientheight、scrollheight、scrollTop区别

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

  8. 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...

  9. jQuery中关于height,innerWidth与outerWidth的区别

    jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边 ...

随机推荐

  1. Cordova - 彻底搞定安卓中的微信支付插件！

    Cordova:8.0.0 Android studio:3.2.1 cordova-plugin-adam-wechat : 3.0.6 你看到这个标题肯定会惊讶,一个Cordova的微信支付插件, ...

  2. stacking

    向大佬学习:https://zhuanlan.zhihu.com/p/32896968 https://blog.csdn.net/wstcjf/article/details/77989963 这个 ...

  3. Django(出版社功能)

    day62 day62 2018-05-02  1. 内容回顾     Django         1. 安装             1. Django版本 1.11.xx            ...

  4. （samba启动失败）smb.service: main process exited, code=exited, status=1/FAILURE

    按照指示,前往:journalctl -xe 没什么发现,搜的时候有人说也可以查看 journalctl -r 打出来之后我也看不出什么门道来 又看到有人说 smb 方面可以看看 testparm 我 ...

  5. web.xml详细配置

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  6. Linux的文件的打包(tar方法)

    Linux的文件的打包(tar方法) tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一 ...

  7. Exception message: /bin/bash: line 0: fg: no job control

    这个错误是 我本地idea 远程调试hadoop集群出现的 Diagnostics: Exception from container-launch. Container id: container_ ...

  8. EF CodeFirst Mirgration

    新建类库Models,加入以下三个类: Product: public class Product { /// <summary> /// 编号 /// </summary> ...

  9. VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题 ：没有显示共享文件夹

      症状:主要表现在Win7中用VM11安装的Ubuntu14.04中,安装完自带的VMware Tools之后,/mnt/hgfs 中没有前面已经设置好的共享文件夹.   仔细查看了安装过程,发现在 ...

  10. Jenkins 学习笔记(一)

    Jenkins 要学习Jenkins首先要了解一个概念---持续集成,持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次 ...