How to get the height of hidden elements in javascript

Acquisition method: 1. Introduce the jquery file; 2. Use the "$("#id value")" statement to obtain the hidden element object according to the specified id value; 3. Use the "element object.height()" statement to get the height of the hidden element.

The operating environment of this tutorial: windows7 system, javascript1.8.5&&jquery3.1.0 version, Dell G3 computer.

First, under normal circumstances, ensure that the div has a height.

nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容，需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  //21
    console.log($("#divsub").height()) //21
</script>

When we add style="display:none;" to the element with the ID of div, rerun the code and the results are as follows:

You can see that the parent div can get the value normally, but the child div can no longer get the height.

When we change style="display:none;" to style="visibility: hidden;", we can still obtain it normally. But the position of the div is still there.

So, there is the following solution, use visibility to hide, and then move the div to an invisible place outside the screen That's it.

nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容，需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  
    console.log($("#divsub").height())
</script>

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to get the height of hidden elements in javascript. For more information, please follow other related articles on the PHP Chinese website!