首先，正常情况下，确保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. LeetCode 542. 01 Matrix

    输入:只包含0,1的矩阵 输出:元素1到达最近0的距离 算法思想:广度优先搜索. 元素为0为可达区域,元素为1为不可达区域,我们的目标是为了从可达区域不断地扩展至不可达区域,在扩展的过程中,也就计算出 ...

  2. 求字符串空格、数字、字母个数--JAVA基础

    相关内容:charAt()函数 package com.nxl123.www;public class NumString { public static void main(String[] arg ...

  3. 【BZOJ1084】最大子矩阵（动态规划）

    [BZOJ1084]最大子矩阵(动态规划) 题面 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式 ...

  4. 【SHOI2012】魔法树（树链剖分，线段树）

    [SHOI2012]魔法树 题面 BZOJ上找不到这道题目 只有洛谷上有.. 所以粘贴洛谷的题面 题解 树链剖分之后直接维护线段树就可以了 树链剖分良心模板题 #include<iostream ...

  5. BZOJ 1123:城市道路

    Sol 就是求割点,把贡献算一下就好...直接tarjan # include <bits/stdc++.h> # define RG register # define IL inlin ...

  6. css - 移动端reset汇总与注释

    1.解决移动端触摸a元素,会有蓝色阴影 正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit- ...

  7. 从IE浏览器获取当前页面的内容

    从IE浏览器获取当前页面内容可能有多种方式,今天我所介绍的是其中一种方法.基本原理:当鼠标点击当前IE页面时,获取鼠标的坐标位置,根据鼠标位置获取当前页面的句柄,然后根据句柄,调用win32的东西进而 ...

  8. wpf 研究之道 winform or wpf，u choose who?

    很久以前,我们用winform做过一个五子棋的程序,当时用winform的画图,先画出棋盘...后来项目的研究阶段,偶尔用winform做个小工具.闲暇之余,看到介绍wpf的资料,只知道它采用了xam ...

  9. PHP/JAVA 杂谈 一（php 槽点）

    [本文为个人意见,不喜就喷吧!] 最近,同事问到我,『那时候为什么从PHP转成Java?』,我想了很久,且撇开主观上的原因,当初业务重构使用java确实有很多可以说道的地方. 槽点1:哪有最好的语言, ...

  10. Java基础知识回顾之一 ----- 基本数据类型

    前言 在开始工作至今,学习各种各样的技术之中发现自己的很多Java的基础知识都忘了⊙﹏⊙b汗... 而且越是学习越是发现Java基础的重要性,所以准备单独抽一下时间进行Java基础的重新学习.在重新学 ...