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数值加上内边框
总结: 写完了。。。。。。。。