首先，正常情况下，确保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. TensorFlow MNIST初级学习

    MNIST MNIST 是一个入门级计算机视觉数据集,包含了很多手写数字图片,如图所示: 数据集中包含了图片和对应的标注,在 TensorFlow 中提供了这个数据集,我们可以用如下方法进行导入: f ...

  2. firewall服务配置

    /* Border styles */ #table-2 thead, #table-2 tr { border-top-width: 1px; border-top-style: solid; bo ...

  3. jQuery.isPlainObject()的作用

    jQuery.isPlainObject()函数用于判断指定参数是否是一个纯粹的对象. 所谓"纯粹的对象",就是该对象是通过"{}"或"new Obj ...

  4. 下拉框的change事件

    6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...

  5. httppost的用法（NameValuePair（简单名称值对节点类型）核心对象）

    一,案例一 定义了一个list,该list的数据类型是NameValuePair(简单名称值对节点类型),这个代码多处用于Java像url发送Post请求.在发送post请求时用该list来存放参数. ...

  6. Android中的Socket

    1. UDP (1)访问网络必须添加权限,访问网络必须添加权限,访问网络必须添加权限,重要的事情说三遍. (2)简述 UDP协议是面向报文的,简单地说,利用UDP访问网络的步骤就是"寄快递& ...

  7. 【NOIP2016】换教室（动态规划）

    题目戳我 题解 其实感觉16年的难度不是很大???? 这道题去年考场上DP都想出来了... 只是因为不会数学期望...然后GG.... 这道题目只要把数学期望搞出来就可以啦 设f[i][j][0/1] ...

  8. 金三银四，2018最新iOS面试题，由它可以搞定面试官？

    序言 这些资料,你一定会用到!我相信很多人都在说,iOS行业不好了,iOS现在行情越来越难了,失业的人比找工作的人还要多.失业即相当于转行,跳槽即相当于降低自己的身价.那么做iOS开发的你,你是否在时 ...

  9. 【MyBatis源码分析】Configuration加载（上篇）

    config.xml解析为org.w3c.dom.Document 本文首先来简单看一下MyBatis中将config.xml解析为org.w3c.dom.Document的流程,代码为上文的这部分: ...

  10. Dapper一个和petapoco差不多的轻量级ORM框架

    我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db,而且市面上的orm框架有很多,其中有一个框架 叫做dapper,而且被称为th ...