How to dynamically set the height and width of a div element using jQuery ?

Set the height of a div element using jQuery

The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual height, actual height with padding, and actual height with padding and border, then the user can use any of the following methods that will dynamically set the height of the content of an element.

  • Using height() method
  • Using innerHeight() method
  • Using outerHeight() method

Example 1: Content Height of div using height() method will change the height of the content of an element excluding the padding, border, and margin of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the height of 
        a div element using jQuery?
    </title>
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;  
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the height of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content height of
            a div on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Height
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height: "+ 
                           $("#div1").height(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").height(newHeight);
                  
                demo = "New-height: "+ 
                           $("#div1").height(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:



Example 2: Content Height of div using innerHeight() method will change the height of the content of an element including the padding of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the height 
        of a div element using jQuery?
    </title>
  
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;
            padding : 10px;
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the height of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content height
            of a div on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Height
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height(+Padding) : "
                           + $("#div1").innerHeight(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").innerHeight(newHeight);
                  
                demo = "New-height(+Padding) : "+ 
                           $("#div1").innerHeight(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:

Example 3: Content Height of div using outerHeight() method will change the height of the content of an element including the padding and border of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the height 
        of a div element using jQuery?
    </title>
  
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 50px; 
            width: 300px; 
            border: 2px solid black;
            padding : 10px;
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the height of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content height 
            of a div  on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Height
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-height(border+Padding) : " 
                           + $("#div1").outerHeight(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newHeight = $(".geeks1").val();
                $(".box").outerHeight(newHeight);
                  
                demo = "New-height(border+Padding) : "
                           + $("#div1").outerHeight(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:

Set the width of a div element using jQuery

The content width of a div can dynamically set or change using width(), innerWidth(), and outerWidth() methods depending upon the user requirement. If the user wants to change the content width of a div dynamically, it includes changing the actual width, actual width with padding, and actual width with padding and border, then the user can use any of the following methods that will dynamically set the width of the content of an element.



  • Using width() method
  • Using innerWidth() method
  • Using outerWidth() method

Example 1: Content Width of div using width() method will change the width of the content of an element excluding the padding, border, and margin of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the width 
        of a div element using jQuery?
    </title>
  
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the width of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content width of a div  
            on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Width
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width : "+ 
                           $("#div1").width(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").width(newWidth);
                  
                demo = "New-width : "+ 
                           $("#div1").width(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:

Example 2: Content Width of div using innerWidth() method will change the width of the content of an element including the padding of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the width 
        of a div element using jQuery?
    </title>
  
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the width of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content width of a div  
            on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Width
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width(+Padding) : "+ 
                           $("#div1").innerWidth(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").innerWidth(newWidth);
                  
                demo = "New-width(+Padding) : "+ 
                           $("#div1").innerWidth(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:

Example 3: Content Width of div using outerWidth() method will change the width of the content of an element including the padding and border of the element.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    
<head
    <title>
        How to dynamically set the width 
        of a div element using jQuery?
    </title>
  
    <script src=
    </script>
    
    <style
        #div1 { 
            height: 100px; 
            width: 200px; 
            border: 2px solid black;
            padding : 10px;
        
    
        h1 { 
            color: green; 
        
        .box{
            background: green;
            border: 1px solid #ccc;
            color: white;
        }
    </style
</head
    
<body
    <center
        <h1>GeeksforGeeks</h1
        <h3>Dynamically set the width of
        a div element using jQuery</h3
    
        <div id="div1" class="box"
            Dynamically set content width of a div  
            on GeeksforGeek.<br>
            GeeksforGeeks is 
            a computer science portal which 
            helps students to learn various  
            programming language and master 
            data structures and algorithms.  
            There are various courses available 
            to learn new skills. 
        </div
        <br
        <form>
            <input type="text" class="geeks1">
            <button type="button" class="geeks2">
                Set Width
            </button>
        </form>
    
        <p id="p1"></p>
        <p id="p2"></p>
    </center
    
    <script
        $(document).ready(function(){
            $(".geeks2").click(function(){
                  
                var demo ="Previous-width(border+Padding) : "+ 
                           $("#div1").outerWidth(); 
                           + "px";
                $("#p1").text(demo);
                  
                var newWidth = $(".geeks1").val();
                $(".box").outerWidth(newWidth);
                  
                demo = "New-width(border+Padding) : "+ 
                           $("#div1").outerWidth(); 
                           + "px";
                $("#p2").text(demo);
            });
        });
    </script
</body
    
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.