jQuery Dimension Methods
jQuery provides a set of useful methods to get or set the dimensions of HTML elements. These methods help you work with element sizes, including padding, borders, and margins.
Here are the key dimension-related methods:
- width() – Gets or sets the width of an element (excluding padding, border, and margin).
- height() – Gets or sets the height of an element (excluding padding, border, and margin).
- innerWidth() – Includes padding, but not border or margin.
- innerHeight() – Includes padding, but not border or margin.
- outerWidth() – Includes padding and border (and optionally margin).
- outerHeight() – Includes padding and border (and optionally margin).
jQuery width() and height() Methods
The width() and height() methods in jQuery are used to get or set the dimensions of an element. These methods exclude padding, borders, and margins, focusing only on the content area.
- width() – Gets or sets the width of an element.
- height() – Gets or sets the height of an element.
Example
The following example retrieves the width and height of a <div> with the ID div1 and displays the values inside the same element when a button is clicked:
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "<br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
This is useful for dynamically displaying or adjusting layout dimensions based on user interaction.
jQuery innerWidth() and innerHeight() Methods
The innerWidth() and innerHeight() methods are used to get the dimensions of an element, including padding but excluding borders and margins.
- innerWidth() – Returns the width of the element's content plus padding.
- innerHeight() – Returns the height of the element's content plus padding.
Example
In the example below, clicking the button will display the inner width and height of the <div> with the ID div1:
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "<br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
This is useful when you want to account for padding in your layout calculations but ignore borders and margins.
jQuery outerWidth() and outerHeight() Methods
The outerWidth() and outerHeight() methods are used to get the full dimensions of an element, including padding and borders (but excluding margin by default).
- outerWidth() – Returns the element’s width along with padding and border.
- outerHeight() – Returns the element’s height along with padding and border.
Example
The example below retrieves the outer width and height of a <div> with the ID div1 when a button is clicked:
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "<br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
This is helpful when you need precise size measurements that factor in the element’s full box size, excluding margins.
Including Margins with outerWidth(true) and outerHeight(true)
By passing true as an argument to the outerWidth() or outerHeight() methods, jQuery will include padding, border, and margin in the returned value.
- outerWidth(true) – Returns the total width of the element, including padding, border, and margin.
- outerHeight(true) – Returns the total height of the element, including padding, border, and margin.
Example
In the example below, clicking the button will display the full width and height (including margins) of the <div> with the ID div1:
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "<br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
This is especially useful when calculating spacing between elements in complex layouts.
More on jQuery width() and height()
jQuery's width() and height() methods can also be used to work with the document and window dimensions, as well as to set custom dimensions for elements.
Get Document and Window Size
You can retrieve the full size of the HTML document and the size of the browser’s visible viewport using $(document) and $(window).
Example
The following code displays the width and height of the document and the window in an alert when the button is clicked:
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += " x " + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += " x " + $(window).height();
alert(txt);
});
Set Width and Height of an Element
You can also set specific dimensions for elements using the same methods.
Example
The following example sets both the width and height of a <div> with the ID div1 to 500px:
$("button").click(function(){
$("#div1").width(500).height(500);
});
This is useful for dynamically resizing elements based on user interactions or layout requirements.
