首先，正常情况下，确保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. （八）java垃圾回收和收尾

    垃圾回收机制:当一个对象不再被引用时,或者说当一个对象的引用不存在时,我们就认为该对象不再被需要,它所占用的内存就会被释放掉.     垃圾回收只是在程序执行过程中偶尔发生,java不同的运行时刻会产 ...

  2. Entity Framework Core必须牢记的三条引用三条命令

    关于EntityFramework Core有三个重要的引用和三条重要的命令,掌握以这六条,基本用Entity Framework Core就得心应手了. 引用1:Install-PackageMic ...

  3. Servlet程序

    编写: (1)搭建javaweb项目: 1,创建一个java项目:HelloServletWeb 2,在HelloServletWeb中创建一个文件夹webapp表示Web的根 3,在webapp中创 ...

  4. 洛谷P2633 Count on a tree（主席树，倍增LCA）

    洛谷题目传送门 题目大意 就是给你一棵树,每个点都有点权,每次任意询问两点间路径上点权第k小的值(强制在线). 思路分析 第k小......又是主席树了.但这次变成树了,无法直接维护前缀和. 又是树上 ...

  5. [BZOJ1030] [JSOI2007] 文本生成器 (AC自动机 & dp)

    Description JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生成一些文章―――总是 ...

  6. [BZOJ2733] [HNOI2012] 永无乡 (splay启发式合并)

    Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...

  7. ls-grep-find组合命令解决企业问题实战

    ls -l|grep “^d”  以d开头 ls -lF  给不同文件类型加不同标志 ls -lF|grep  “/$” 以/结尾 ls -lF|grep  / find ./ -type d fin ...

  8. error：com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException

    问题:同样的代码,只能插入一组值,第二组值插入不了 解决:开始我将app_id作为主键,但很明显,同一个app_id会有不同的index,而同一个index也可能对应不同的app_id,因此只能添加一 ...

  9. windows下的react-native 开发环境搭建

    本教程用安卓手机作为演示. 首先安装jdk.本教程基于jdk1.8,安装时有一点要特别注意:jdk和jre必须装到不同目录下,否则初始化react-native项目时大概率报tools.jar not ...

  10. PORTE_ISFR & (1<<n）

    位运算关键:空出补零,溢出舍弃