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

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

从动态获取div高度的问题展开来看的更多相关文章

  1. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  2. 动态获取div的高度 随着窗口变化而变化

    // 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...

  3. js使用offsetHeight获取div高度为0的问题

    今晚试了好久没弄出来,后来获取子一层的div就能获取到高度了 我的情况是这样的:我在最外面写一个<div id="mainBody">,  里面写bootstrap的d ...

  4. javascript获取div高度

    DOM的: 获得了div的高度值 = document.getElementById("目标id").offsetHeight;

  5. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  6. jquery动态修改div高度

    <!DOCTYPE html> <html> <head> <script src="jquery-1.4.2.min.js">&l ...

  7. 获取iframe（angular 动态页面）高度

    问题比较特殊,google了好久才得到启示 开发的angular页面,需要嵌入到客户的web页中,以iframe方式.由于iframe的高度需要指定,而angular动态生成机制导致页面高度会随时变化 ...

  8. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  9. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

随机推荐

  1. c# Http Post访问接口方式

    一.json格式数据提交返回 提交和返回数据都为json格式 参数提交方式:application/json;charset=UTF-8 统一采用UTF-8字符编码 public string Pos ...

  2. iOS:UICollectionView纯自定义的布局:瀑布流布局

    创建瀑布流有三种方式:   第一种方式:在一个ScrollView里面放入三个单元格高度一样的tableView,禁止tableView滚动,只需让tableView随着ScrollView滚动即可. ...

  3. ES6里关于类的拓展（二）：继承与派生类

    继承与派生类 在ES6之前,实现继承与自定义类型是一个不小的工作.严格意义上的继承需要多个步骤实现 function Rectangle(length, width) { this.length = ...

  4. sql取随机结果集

    应用场景: 某日,接产品姐姐需求,网站搜索页在搜索特定的内容时候,会现实搜索不到结果!如衣服网站,搜索鞋子等.为了不直接呈现一个赤裸裸的无此商品页面,so,需要在搜索商品件数小于3时,在下面随机推荐本 ...

  5. 倍福TwinCAT(贝福Beckhoff)基础教程1.2 TwinCAT安装配置

    由于TC2和TC3都有可能用到,个人推荐都安装,但是注意必须是先安装的TwinCAT2,然后安装TwinCAT3,如果反了可能两个都没法用(打开TcSwitchRuntime提示Both TwinCA ...

  6. @property和@x.setter和@x.deleter表示可读可写可删除

    @property可以将python定义的函数“当做”属性访问,从而提供更加友好访问方式,但是有时候setter/deleter也是需要的.1>只有@property表示只读.2>同时有@ ...

  7. 你真的了解装箱(Boxing)和拆箱（Unboxing）吗？

    所谓装箱就是装箱是将值类型转换为 object 类型或由此值类型实现的任一接口类型的过程.而拆箱就是反过来了.很多人可能都知道这一点,但是是否真的就很了解boxing和unboxing了呢?可以看下下 ...

  8. 【Excle数据透视表】如何得到数据透视表中某个汇总行的明细数据

    例如: 现在想得到"北京 汇总"的明细数据,该怎么处理呢? 步骤 右键数据透视表任意单元格→数据透视表选项→启用显示明细数据→确定→单击"北京 汇总"行最后一个 ...

  9. git个人使用总结(命令版)

    一.基础命令 快照类操作:add.status.diff.commit.reset.rm.mv 分支类基本操作:branch.checkout.log.stash 分享及更新项目基本操作:pull.p ...

  10. 【转】GitHub入门详细讲解

    第一:请登录https://windows.github.com/ 下载您需要的安装软件,进行安装.安装后桌面有:GitHub 和 Git Shell 第二: 申请一个帐号https://github ...