jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言：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的更多相关文章
- Jquery中的height(),innerHeight(),outerHeight()的区别
前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- jquery 之height(),innerHeight(),outerHeight()方法区别详解
在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...
- 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法
资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...
- height/innerHeight/outerHeight
<script> $(document).ready(function(){ alert("height:"+$("#div").height()) ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- offsetheight 和clientheight、scrollheight、scrollTop区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...
- jQuery中关于height,innerWidth与outerWidth的区别
jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边 ...
随机推荐
- jzoj5710
對於每個詢問,我們先考慮插入1~r中每個數的答案,這樣子就不用考慮後面數對現在的影響 那麼我們可以在權值線段樹的每一個位置存儲每一個值最後一次結束的位置 問題變成了,如何判斷區間連續? 我們可以對線段 ...
- poj1125
题目大意:哎,意思看了半天,看了别人的解释才明白,就是说从一个经纪人出发传递消息,直到所有人都收到消息 也就是说只要找到该经纪人到其它所有点的最短距离中的最大一个时间,就说明最后一个也收到消息了. 而 ...
- linux中 ll 和ls 区别
ll 列出来的结果详细,有时间,是否可读写等信息 ,象windows里的 详细信息ls 只列出文件名或目录名 就象windows里的 列表 ll -t 是降序, ll -t | tac 是升序 l ...
- Java并发工具类之线程间数据交换工具Exchanger
Exchanger是一个用于线程间协做的工具类,主要用于线程间的数据交换.它提供了一个同步点,在这个同步点,两个线程可以彼此交换数据.两个线程通过exchange方法交换数据,如果一个线程执行exch ...
- javaweb 项目的异常处理
首先关于异常的分类: java 中关于异常的分类情况是:throwable 是所有异常和错误的基类,下面在分为Error 和 Exception: 简单的异常体系结构如下图所示: 其中Exceptio ...
- [nuget]VS中包管理器打开后找不到其它工程的问题
今天新建工程做小组内用的工具,打算做个winform的项目, 用vs新建了winform项目,简单分下层吧,又加了两个类库项目, 然后,要用到的包需要nuget安装,于是发生这个问题: [VS]在so ...
- Jmeter做并发测试（设置集合点）
集合点:让所有请求在不满足条件的时候处于等待状态. 如:我集合点设置为50,那么不满足50个请求的时候,这些请求都会集合在一起,处于等待状态,当达到50的时候,就一起执行.从而达到并发的效果. 那么J ...
- 2019年北航OO第一次博客总结
一.基于度量对程序结构的分析 1. 第一次作业 1.1 基于类的分析的度量 首先,基于类的属性个数,方法个数,每个方法的规模,每个方法的控制分支数目,类总代码规模等特征对本次作业的结构进行分析. 1. ...
- 【bzoj3224】【Tyvj 1728】 普通平衡树 树状数组
您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入$x$数2. 删除$x$数(若有多个相同的数,因只删除一个)3. 查询$x$数的排名(若有多个相同的数,因输出最小 ...
- 【BZOJ2300】【HAOI2011】防线修建
题目大意:给你m+3个点,有q个操作,每次要么询问当前点集构所构成的上凸壳总长度,要么在当前点集中删除一个点. 这题是吼题啊!!! 刚开始想着如何正常地做,考虑过用线段树维护一个区间内的凸包,发现并不 ...