前言：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. nginx 场景业务汇总 （中）

    本文链接:http://www.cnblogs.com/zhenghongxin/p/8906225.html,如果可以,请阅读上篇 <nginx场景业务汇总(初)> (十三)负载均衡 轮 ...

  2. django项目中使用项目环境制作脚本 通过终端命令运行脚本文件

    在实际的django项目开发中,有时候需要制作一些脚本文件对项目数据进行处理,然后通过终端命令运行脚本. 完整的实现流程如下: 1.在一个应用目录下(app, 必须是在应用目录下,可以专门创建一个应用 ...

  3. jquery 中选择当前标签下众多相同子标签中的第n个

    可以用jquery选择器的:eq选择器或者jquery遍历的eq()方法,下面带那给出ul下第4个li的内容 $("ul li:eq(3)")  // 元素的index位置工0开始 ...

  4. webstrom 一直反复indexing

    从网上找了找答案 好多说 把大的静态文件exclude(在项目文件上右击-->Mark Directory As -->exclude)出去,可是不管用.我刚发生的情况是一直刷新,一遍一遍 ...

  5. elasticsearch 导入基础数据并索引之 geo_point

    elasticsearch 中的地理信息存储, 有geo_point形式和geo_shape两种形式 此篇只叙述geo_point, 地理位置需要声明为特殊的类型, 不显示在mapping中定义的话, ...

  6. （原创）定时线程池中scheduleWithFixedDelay和scheduleAtFixedRate的区别

    scheduleAtFixedRate 没有什么歧义,很容易理解,就是每隔多少时间,固定执行任务. scheduleWithFixedDelay 比较容易有歧义 貌似也是推迟一段时间执行任务,但Ora ...

  7. mysql中授权其它电脑链接指令。

    grant all privileges on yourDatabaseName to 'user'@'databaseIPAddress' identified by 'password' with ...

  8. function参数

    expr_without_variable { Z_LVAL($$.u.constant) = ; zend_do_pass_param(&$, ZEND_SEND_VAL, Z_LVAL($ ...

  9. 对Deeplung检测+两样性分类的一个整合

    整体的流程分为以下几步: 读取原始数据(.mhd文件)——> 生成mask ——> 对数据预处理 ——> 执行检测 ——> 对检测结果进行分类 ——>可视化 懒一点,不贴 ...

  10. (转)浅谈MySql的存储引擎（表类型）

    原文:http://www.cnblogs.com/lina1006/archive/2011/04/29/2032894.html 什么是MySql数据库 通常意义上,数据库也就是数据的集合,具体到 ...