Skip to content
Related Articles

Related Articles

How to get the width of hidden element in jQuery ?
  • Last Updated : 30 Jul, 2020

An HTML element can be hidden with the help of .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.

There are two kinds of width that are defined with the 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.

Example 1: This example shows how to calculate innerWidth of the hidden element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                var demo = $("div").innerWidth();
                $("#demo").text(demo);
            });
        }); 
    </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>
        <h1>GeeksforGeeks</h1>
  
        <h3>
            Get the width of the hidden 
            element in jQuery
        </h3>
  
        <div>
  
        </div>
  
        <p id="demo">
            Here the width of the
            hidden "div" element will appear.
        </p>
  
        <button id="btn1">Submit</button>
    </center>
</body>
  
</html>

Output:

  • Before Clicking the Button:



  • After Clicking the Button: Here, border width will not be added to the result.

Example 2: This example show how to calculate outerWidth of the hidden element.

HTML




<!DOCTYPE html> 
<html
    
<head
    <script src
    </script
      
    <script
        $(document).ready(function() { 
            $("#btn1").click(function() { 
                var demo = $("div").outerWidth(); 
                $("#demo").text(demo); 
            }); 
        }); 
    </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>
        <h1>GeeksforGeeks</h1
          
        <h3>
            Get the width of the hidden 
            element in jQuery
        </h3
  
        <div
        
        </div
        
        <p id="demo"
            Here the width of the  
            hidden "div" element will appear. 
        </p>
   
        <button id="btn1">Submit</button
  </center>
</body
    
</html>

Output:

  • Before Clicking the Button:

  • After Clicking the Button: Here, border width will be added to the result.

My Personal Notes arrow_drop_up
Recommended Articles
Page :