前言：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. 【转】目标检测之YOLO系列详解

    本文逐步介绍YOLO v1~v3的设计历程. YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这 ...

  2. APP间传递消息

    https://www.jianshu.com/p/d640ccfcea5f 1: URL Scheme 常用的App间传值方式.常见于分享等. 2: Keychain  借助系统类 Keychain ...

  3. C++中vector的使用

    在c++中,vector是一个十分有用的容器. 作用:它能够像容器一样存放各种类型的对象,简单地说,vector是一个能够存放任意类型的动态数组,能够增加和压缩数据. vector在C++标准模板库中 ...

  4. Mysql错误处理: /usr/bin/mysqld_safe: line xxx: xxxx Killed ... (mysql自动停止 Plugin FEDERATED is disabled 的完美解决方法)

    哈哈哈,问题总算解决,内心抑不住的开心 centos mysql 问题:Plugin 'FEDERATED' is disabled. /usr/sbin/mysqld: Table 'mysql.p ...

  5. 【mongodb】——常用命令大全

    MongoDB是NoSQL数据库系统中比较流行的数据库之一.它也是最接近关系型数据库的,一个数据库可以包含多个集合(Collection),类似于关系数据库中的表:而每个集合中可以存储一组由列标识的记 ...

  6. 电脑网络IP固定地址自动改变！

    今天电脑的固定IP地址每次重启设备,会自动改变一次.所以每次重启电脑都要手动重设IP地址.网关.DNS及高级选项中的ip设置. 高级选项中的ip设置每次都有2个ip,都要我删除一个.我都崩溃了,还以为 ...

  7. 如何通过Python暴力破解网站登陆密码

    首先申明,该文章只可以用于交流学习,不可以用于其他用途,否则后果自负. 现在国家对网络安全的管理,越来越严,但是还是有一些不法网站逍遥法外,受限于国内的人力.物力,无法对这些网站进行取缔. 今天演示的 ...

  8. mysql编写存储过程（1）

    存储过程:其实就是存储在数据库中,有一些逻辑语句与SQL语句组成的函数.由于是已经编译好的语句,所以执行速度快,而且也安全. 打开mysql的控制台,开始编写存储过程. 实例1: 编写存储过程: 执行 ...

  9. json，DataTable，model

    1.DataTable转json public class DataTableConvertJson { #region dataTable转换成Json格式 /// <summary> ...

  10. web worker原理 && SSE原理

    第一部分 什么是 web worker? 我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复 ...