Skip to content
Related Articles

Related Articles

How to dynamically set the height and width of a div element using jQuery ?
  • Last Updated : 18 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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




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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :