jQuery Dimensions
What are jQuery Dimensions Methods?
jQuery provides methods to get and set the width, height, inner size, and outer size of HTML elements dynamically. These methods help in designing responsive web pages.
Why Use jQuery Dimensions?
✅ Easier than plain JavaScript – Simple and readable syntax.
✅ Dynamically adjust element sizes – Useful for interactive UI designs.
✅ Get precise sizes – Includes padding, border, and margins if needed.
jQuery Dimension Methods
| Method | Description |
|---|---|
| width() | Gets or sets the width (without padding, border, or margin). |
| height() | Gets or sets the height (without padding, border, or margin). |
| innerWidth() | Gets the width including padding but not border/margin. |
| innerHeight() | Gets the height including padding but not border/margin. |
| outerWidth() | Gets the width including padding and border (excluding margin). |
| outerHeight() | Gets the height including padding and border (excluding margin). |
| outerWidth(true) | Gets the width including padding, border, and margin. |
| outerHeight(true) | Gets the height including padding, border, and margin. |
📌 Note:
•If used without a parameter, the method gets the value.
• If used with a parameter, the method sets a new value.
Using jQuery Dimensions Methods
1. Get and Set Width – width()
👉 Example: Get and set the width of a div.
$(“#getWidthBtn”).click(function() {
alert(“Width: ” + $(“#box”).width() + “px”);
});
$(“#setWidthBtn”).click(function() {
$(“#box”).width(300);
});
📌 What happens?
• Clicking “Get Width” displays the width of the div.
• Clicking “Set Width” changes the width to 300px.
2. Get and Set Height – height()
👉 Example: Get and set the height of a div.
$(“#getHeightBtn”).click(function() {
alert(“Height: ” + $(“#box”).height() + “px”);
});
$(“#setHeightBtn”).click(function() {
$(“#box”).height(200);
});
📌 What happens?
• Clicking “Get Height” displays the height of the div.
• Clicking “Set Height” changes the height to 200px.
3. Get Inner Dimensions – innerWidth() & innerHeight()
These include padding but not border/margin.
👉 Example: Get the inner width and height of a div.
$(“#getInnerSizeBtn”).click(function() {
alert(“Inner Width: ” + $(“#box”).innerWidth() + “px, Inner Height: ” + $(“#box”).innerHeight() + “px”);
});
📌 What happens?
• Clicking the button shows an alert with the inner width and height.
4. Get Outer Dimensions – outerWidth() & outerHeight()
These include padding and border, but not margin.
👉 Example: Get the outer width and height of a div.
$(“#getOuterSizeBtn”).click(function() {
alert(“Outer Width: ” + $(“#box”).outerWidth() + “px, Outer Height: ” + $(“#box”).outerHeight() + “px”);
});
📌 What happens?
• Clicking the button shows an alert with the outer width and height.
5. Get Full Outer Dimensions (Including Margin) – outerWidth(true) & outerHeight(true)
These include padding, border, and margin.
👉 Example: Get the full dimensions of a div.
$(“#getFullSizeBtn”).click(function() {
alert(“Full Width: ” + $(“#box”).outerWidth(true) + “px, Full Height: ” + $(“#box”).outerHeight(true) + “px”);
});
📌 What happens?
• Clicking the button shows an alert with the total width and height, including margins.
Conclusion
🎯 width() & height() get or set the element’s width/height.
🎯 innerWidth() & innerHeight() include padding but not border/margin.
🎯 outerWidth() & outerHeight() include padding and border.
🎯 outerWidth(true) & outerHeight(true) include padding, border, and margin.
