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