首先，正常情况下，确保div是有高度的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>

</head>

<body>

    <div id="div">

        <div id="divsub">

            子div内容，需要获取我的高度

        </div>

    </div>

</body>

<script type="text/javascript">

    console.log($("#div").height())  //21

    console.log($("#divsub").height()) //21

</script>

</html>

当我们在id为div的元素上加了  style="display:none;" 之后，重新运行代码，结果如下：

可以看到，父div能正常获取值，而子div已经获取不到高度了。

当我们把 style="display:none;" 改成 style="visibility: hidden;" 后，仍能够正常获取。但是div的位置还在。

于是，就有了下面的解决方案，使用visibility隐藏，然后把div移到屏幕之外看不见的地方就可以了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>

</head>

<body>

    <div id="div" style="visibility:hidden; position: absolute;top:-9999px;left:-9999px;">

        <div id="divsub">

            子div内容，需要获取我的高度

        </div>

    </div>

</body>

<script type="text/javascript">

    console.log($("#div").height())

    console.log($("#divsub").height())

</script>

</html>

参考资料：http://www.cnblogs.com/cythia/p/5981306.html

js如何获取隐藏的元素的高度的更多相关文章

  1. 原生js如何获取某一元素的高度

    三种方法: 1.document.getElementById("id").style.height,这种方法的前提是必须之前已经显示的在css中声明过height,才能取得正确的 ...

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

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

  3. 【功能代码】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  4. 【JS】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  5. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  6. JS/jquery获取iframe内部元素和ifame中获取外部元素精华

    1.从外部获取iframe内部元素方法: js : window.frames['frame'].document.getElementById("imglist");   //f ...

  7. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  8. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

  9. coding++：JS/jQuery获取兄弟姐妹等元素

    jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...

随机推荐

  1. DirectX--给视频加马赛克、字符OSD

    在虚拟摄像头(CSourcefilter)的fillbuffer中添加代码,在打码区域50*50,像素分辨率1/10: for (int i=0;i<50;i++) { for (int k=0 ...

  2. tcp_wrapper

    介绍 对基于tcp协议开发并提供服务的应用程序,所提供的一层访问控制工具 基于库调用实现其功能 * 库名:libwrap 判断服务是否能够由tcp_wrapper进行访问控制 1. 动态编译 ldd命 ...

  3. 异常-----freemarker.core.ParseException: Encountered

    1.错误描述 freemarker.core.ParseException: Encountered " " at line 14, column 12 in myself.ftl ...

  4. 【转载】Java并发编程：volatile关键字解析（写的非常好的一篇文章）

    原文出处: 海子 volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volat ...

  5. 用css以写代码形式画一个皮卡丘

    我的个人网站是通过写代码的形式来形成一个网站的,前一阵子在某个大神的github上看到他用写代码的形式来完成一个皮卡丘,于是心血来潮花了半个小时,也完成了一个作品. 这其中涉及到的知识点也不是很复杂, ...

  6. 【BZOJ3730】震波（动态点分治）

    [BZOJ3730]震波(动态点分治) 题面 BZOJ 题意 给定一棵树, 每次询问到一个点的距离\(<=K\)的点的权值之和 动态修改权值, 强制在线 题解 正常的\(DP\)??? 很简单呀 ...

  7. 【POJ3683】Priest John's Busiest Day

    题目 John is the only priest in his town. September 1st is the John's busiest day in a year because th ...

  8. [BZOJ2761] [JLOI2011] 不重复数字 (set)

    Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 18 3 19 ...

  9. app图标icon大全

    http://tool.58pic.com/tubiaobao/index.php?m=Index&a=ui&p=2 很有用,下载没用,直接右键吧.

  10. sqlserver中压缩日志文件

    最近在转移数据,sqlserver的日志文件ldf,占用空间特别大,为了还原库,节省空间,所以压缩日志文件迫在眉睫.在网上找了一段代码: USE [master] GO ALTER DATABASE ...