How to Get the Width of Hidden Element in jQuery?

Last Updated : 16 Oct, 2024

An HTML element can be hidden with the help of the .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery.

Two kinds of width are defined with every HTML element i.e, innerWidth and the outerWidth of the element:

innerWidth: This width is considered when the width of the border is not considered for the selected element.
outerWidth: This width is considered when the width of the border is considered for the selected element.

Let’s see examples of getting the width of a hidden element using innerWidth and outerWidth.

Examples of Getting Width of Hidden Element

Example 1: Calculating innerWidth of the hidden element

The innerWidth() method in jQuery lets you get the width of an element, including padding but not borders or margins. This method is helpful when you want to know how much space the element takes up inside, even if it’s hidden from view. It gives you a clear idea of the element’s size for layout calculations.

Example: The code demonstrates how to retrieve the width of a hidden div element using jQuery’s innerWidth() method.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using innerWidth</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        div {
            width: 310px;
            height: 80px;
            font-weight: bold;
            color: green;
            font-size: 25px;
            border: 1px solid green;
            visibility: hidden;
            border: 2px solid black;
            padding: 10px;
        }

        body {
            border: 1px solid black;
            padding: 20px;
        }

        h1 {
            color: green;
        }
    </style>

</head>

<body>
    <center>
        <h3>
            Get the width of the hidden
            element in jQuery
        </h3>

        <p id="demo">
            Here the width of the
            hidden "div" element will appear.
        </p>

        <button id="btn1">Submit</button>
    </center>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                let demo = $("div").innerWidth();
                $("#demo").text(demo);
            });
        }); 
    </script>

</body>

</html>

Output:

Example 2: Calculating outerWidth of Hidden Element

The outerWidth() method measures the width of an element, including its padding and borders, but excluding margins. This method is useful when you want to understand the total width of the element, including how much space it occupies on the page. Even if the element is hidden, this method will still return the correct width for your calculations.

Example: This example demonstrates as to how to calculate the outerWidth of the hidden element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using OuterWidth</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <style>
        div {
            width: 310px;
            height: 80px;
            font-weight: bold;
            color: green;
            font-size: 25px;
            border: 1px solid green;
            visibility: hidden;
            border: 2px solid black;
            padding: 10px;
        }

        body {
            border: 1px solid black;
            padding: 20px;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>

        <h3>
            Get the width of the hidden
            element in jQuery
        </h3>

        <p id="demo">
            Here the width of the
            hidden "div" element will appear.
        </p>

        <button id="btn1">Submit</button>
    </center>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                let demo = $("div").outerWidth();
                $("#demo").text(demo);
            });
        }); 
    </script>
</body>

</html>

Output:

How to get the width and height of an element in jQuery ?

SHUBHAMSINGH10

Improve

Article Tags :

How to Get the Width of Hidden Element in jQuery?

Examples of Getting Width of Hidden Element

Example 1: Calculating innerWidth of the hidden element

Example 2: Calculating outerWidth of Hidden Element

Similar Reads

Thank You!

What kind of Experience do you want to share?