Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Dynamically Set Height and Width of a DIV Element Using jQuery
In this article, we will learn how to dynamically set the height and width of a div element using jQuery and its methods such as height() and width().
In web development, there are often scenarios where you need to dynamically adjust the height and width of a <div> element based on certain conditions or user interactions. We can do this easily using jQuery, a popular JavaScript library.
Let's understand how to implement this with the help of some examples.
Example 1
In this example, we will dynamically set the height and width of a div container, when the document is mounted and rendered, using the height() and width() jQuery methods.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically set the height and width of a div element using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#myDiv {
background-color: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<h3>How to dynamically set the height and width of a div element using jQuery?</h3>
<div id="myDiv">
</div>
<script>
$(document).ready(function() {
const divElement = $("#myDiv");
divElement.height(200); // Set the height to 200 pixels
divElement.width(300); // Set the width to 300 pixels
});
</script>
</body>
</html>
Example 2
In this example, we will follow the above code pattern, and change the height and width of the div container with the help of 3 different methods, using the attr method to set the height and width to 200px and 300px, height and width properties to set the height and width to 100px and 200px, and animate method of jQuery to set the height and width to 300px and 400px respectively.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically set the height and width of a div element using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#myDiv {
background-color: #ccc;
border: 1px solid #000;
}
</style>
</head>
<body>
<h3>How to dynamically set the height and width of a div element using jQuery?</h3>
<button onclick="setDimensionsAttr()">Set Dimensions Using the attr method</button>
<button onclick="setDimensionsProp()">Set Dimensions Using height and width property</button>
<button onclick="setDimensionsAnimate()">Set Dimensions Using animate method</button>
<div id="myDiv">
</div>
<script>
const divElement = $("#myDiv");
function setDimensionsAttr() {
// Example 1: Using the attr jQuery method
divElement.attr('style', 'height: 200px; width: 300px;');
}
function setDimensionsProp() {
// Example 2: Using height and width jQuery property
divElement.height(100); // Set the height to 100 pixels
divElement.width(200); // Set the width to 200 pixels
}
function setDimensionsAnimate() {
// Example 3: Using animate jQuery method
divElement.animate({ height: '300px', width: '400px' }, 'slow');
}
</script>
</body>
</html>
Conclusion
In conclusion, dynamically setting the height and width of a <div> element using jQuery offers a flexible and efficient way to adjust the dimensions based on specific conditions or user interactions. With the help of the above examples, we learned how to dynamically set the height and width of an HTML element with the help of height() and width(), attr(), and animate() jQuery methods.
696 Views
