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

03 Aug, 2021
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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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.
jQuery-Misc
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
CSS | :not(:last-child):after Selector
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)