从动态获取div高度的问题展开来看

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数值加上内边框

总结: 写完了。。。。。。。。

posted @ 2015-06-09 22:03  请低下头  阅读(12560)  评论(0)  编辑  收藏  举报