ps 可能篇幅比較長，請大家耐心看看
今天有人在群里問我 動態獲取高度怎么獲取 我就說jq中的outerHeight、 height 、innerHeight 原生的height clientHeight、scrollHeight、offsetHeight 按道理百度一下 就ok 了 但是他問了一句這些有什么區別？ 哎呦 我去 我還真的需要整理一下 好吧 咱們開始整理一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; } </style> </head> <body> <div id="div1"></div> </body> </html>
咱們先弄一個div放在這里 然后測試一下這些的區別 然后總結一下
這個是火狐中的盒模型解析出來的結果 請看好
下邊咱們開始 直接寫js 開始測試
先說一下這個height (因為他奇葩）有兩點
1、height:
(1)其實Height高度跟其他的高度有點不一樣,在javascript中它是屬於對象的style對象屬性中的一個成員,它的值是一個字符類型的,而另外 三個高度的值是int類型的,它們是對象的屬性.因此這樣document.body.height就會提示undenifine,而必須寫成 document.body.style.height （好坑）
(2)只能在div在行內樣式設置了height才能獲取到(注意是行內 )----------->更坑
那么關於height的代碼咱們發一下 （實際項目中應該用不到這么坑的東西了吧）
所以這個height 你在行內寫了多少就是多少了（當然沒有padding border之類的計算了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; } </style> </head> <body> <div id="div1" style="height:200px"></div> <script type="text/javascript"> window.onload=function () { var oDiv =document.getElementById('div1'); alert( oDiv.style.height)//200 } </script> </body> </html>
2、clientHeight: 是可見區域的寬度 也就是算上padding 不算border 的
window.onload=function () { var oDiv =document.getElementById('div1'); alert( oDiv.clientHeight) }//結果也是200
3、scrollHeight：它其實就是滾動條可滾動的部分還要加上boder的高度還要加上橫向滾動條不可用的高度,與clientHeight比起來,多個border的高度跟橫向滾動條不可用的高度.
我測試以后 發現火狐和谷歌都是不一樣的數值 哎。。看來這個是不好用的 那就不上代碼了 忽略它吧 倒是有很多項目中有獲取到屏幕的頂部的距離這個效果之類的 等下次再說（感覺已寫 就寫出來的多了）
4、offsetHeight：均表示是自身的高度,如果有設置boder和padding的話還應該加上boder的值(例子中沒有寫padding 你可以自己加上是計算在內的)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; } </style> </head> <body> <div id="div1" ></div> <script type="text/javascript"> window.onload=function () { var oDiv =document.getElementById('div1'); alert( oDiv.offsetHeight)//202 加上border } </script> </body> </html>
好了原生的寫完了 看一下就知道怎么回事了
下邊開始說jq方法 看看封裝以后是怎么樣的
1、outerHeight：
api 解釋的很詳細啊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; } </style> </head> <body> <div id="div1" ></div> <script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>//百度的cdn <script type="text/javascript"> $(function () { alert($("#div1").outerHeight());//202 }) </script> </body> </html>
如果不設置為true的話 那么計算外部高度就是本身的200px+邊框的2px ------->=202px;
如果你設置為true的話那么結果就是222 就加上了內邊距20px
2、height：
詳細的api啊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; } </style> </head> <body> <div id="div1" ></div> <script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { alert($("#div1").height());//200px }) </script> </body> </html>
看着和js中的height是一樣的啊 （除了原生的那兩點坑爹）結果是一樣的 而且jq還能直接設置數值 也就說獲取之后可以直接設置他的height
3、innerHeight:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動態獲取div的高度問題</title> <style type="text/css"> *{margin:0; padding: 0; border: none; } body{padding: 100px;} #div1{width: 200px; height: 200px; margin:10px; border: 1px solid red; padding: 10px; } </style> </head> <body> <div id="div1" ></div> <script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { alert($("#div1").innerHeight());//220px }) </script> </body> </html>
也就是說 會把當前的height數值加上內邊框
總結: 寫完了。。。。。。。。