zoukankan      html  css  js  c++  java
  • js如何获取隐藏的元素的高度

    首先,正常情况下,确保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

  • 相关阅读:
    【转贴】Render to Texture(渲染到纹理)
    【转贴】EffectFramework
    真正的电脑高手
    【ZT】剑道与编程之道
    【转贴】DXUT 框架入门 2
    【转贴】DXUT 框架函数介绍
    第四章 治病法要(1)
    第一章 略说中医的学习与研究(5)
    第二章 伤寒之意义(2)
    第一章 略说中医的学习与研究(4)
  • 原文地址:https://www.cnblogs.com/ginb/p/7814387.html
Copyright © 2011-2022 走看看