? jQuery Dimension Methods

Commonly Used Methods:

? 1. .width() and .height()

Get the width or height of an element:

html
"#getDimensions").click(function() {    var width = $("#box").width();    var height = $("#box").height();    alert("Width: " + width + "px, Height: " + height + "px");  });</script>

Explanation:

• .width() and .height() get the content width and content height of the #box element. These methods exclude padding, border, and margin.

Set the width or height of an element:

html
"#setDimensions").click(function() {    $("#box").width(400).height(300);  // Sets width to 400px and height to 300px  });</script>

Explanation:

• .width(400) and .height(300) set the content width and height of #box to 400px and 300px respectively.

? 2. .innerWidth() and .innerHeight()

The .innerWidth() and .innerHeight() methods include the padding along with the content.

Example:

html
"#getInnerDimensions").click(function() {    var innerWidth = $("#box").innerWidth();    var innerHeight = $("#box").innerHeight();    alert("Inner Width: " + innerWidth + "px, Inner Height: " + innerHeight + "px");  });</script>

Explanation:

• .innerWidth() and .innerHeight() will return the width and height including padding, but not the border.

? 3. .outerWidth() and .outerHeight()

The .outerWidth() and .outerHeight() methods return the dimensions including padding and border.

Example:

html
"#getOuterDimensions").click(function() {    var outerWidth = $("#box").outerWidth();    var outerHeight = $("#box").outerHeight();    alert("Outer Width: " + outerWidth + "px, Outer Height: " + outerHeight + "px");  });</script>

Explanation:

• .outerWidth() and .outerHeight() include both padding and border, but not the margin.

Set the outer width or height (including padding and border):

html
"#setOuterDimensions").click(function() {    $("#box").outerWidth(400).outerHeight(300);  // Sets outer width to 400px and outer height to 300px  });</script>

? 4. .offset()

The .offset() method gets the position of an element relative to the document (top and left positions).

Example:

html
"#getOffset").click(function() {    var offset = $("#box").offset();    alert("Top: " + offset.top + "px, Left: " + offset.left + "px");  });</script>

Explanation:

• The .offset() method returns the position (top and left) of the #box relative to the document.

Set the offset position:

html
"#setOffset").click(function() {    $("#box").offset({ top: 100, left: 200 });  // Set new top and left position  });</script>

? Summary of jQuery Dimension Methods

• .width() / .height(): Get or set the content width/height (excludes padding, border, margin).

• .innerWidth() / .innerHeight(): Get or set the width/height including padding.

• .outerWidth() / .outerHeight(): Get or set the width/height including padding and border.

• .offset(): Get the position (top, left) of an element relative to the document.