首先，正常情况下，确保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. 使用vue-cli脚手架初始化Vue项目下的项目结构

    概述 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及 ...

  2. 芝麻HTTP：PhantomJS的安装

    PhantomJS是一个无界面的.可脚本编程的WebKit浏览器引擎,它原生支持多种Web标准:DOM操作.CSS选择器.JSON.Canvas以及SVG. Selenium支持PhantomJS,这 ...

  3. Python Web-第二周-正则表达式（Using Python to Access Web Data）

    0.课程地址与说明 1.课程地址:https://www.coursera.org/learn/python-network-data/home/welcome 2.课程全名:Using Python ...

  4. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  5. 都在说RunLoop...... 到底什么是RunLoop？

    RunLoop(消息循环):说白了就是一种事件监听循环.就好比是一个while循环,监听到事件就起来,没有就休息. 介绍: 它可以在不同模式下进行切换,iOS有五种模式,其中UIInitializat ...

  6. 【洛谷2055】【CJOJ2487】【ZJOI2009】 假期的宿舍

    题面 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不 ...

  7. LightOJ1245 Harmonic Number (II)

    题意 \(求\Sigma \lfloor \frac{n}{i} \rfloor\) Input starts with an integer T (≤ 1000), denoting the num ...

  8. jsp常用的jstl语法

    <c:forEach items="<object>" begin="<int>" end="<int>&q ...

  9. react-native简单demo：实现加载豆瓣电影列表

    https://github.com/axel10/react-native-douban' 相关随笔: react-native 开发环境搭建 http://www.cnblogs.com/axel ...

  10. lvm创建卷组和格式化

    * 前提条件:/dev/sdb为一块空的硬盘 * 创建物理卷:pvcreate /dev/sdb * 创建卷组:vgcreate vol_name /dev/sdb (vol_name 为卷组名字) ...