Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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




<!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>


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




<!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>


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




<!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>


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




<!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>


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




<!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>


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




<!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>


Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads