jQuery offers several methods, such as height(), innerHeight(), outerHeight(), width(), innerWidth(), and outerWidth(), for retrieving and setting the CSS dimensions of elements. Refer to the illustration below to grasp how these methods calculate an element's box dimensions.
width() and height() MethodsThe jQuery width() and height() methods retrieve or set the width and height of the element, respectively. These dimensions do not include padding, border, or margin on the element. The following example will return the width and height of a <div> element.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").width();
var divHeight = $("#box").height();
$("#result").html("Width: " + divWidth + ", " + "Height: " + divHeight);
});
});
</script>Similarly, you can set the width and height of an element by specifying the value as a parameter within the width() and height() methods. The value can be either a string (e.g., "100px", "20em") or a number. The following example will set the width of a <div> element to 400 pixels and the height to 300 pixels, respectively.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").width(400).height(300);
});
});
</script>
Note: Use the jQuery width() or height() method when you need to use an element's width or height in a mathematical calculation, as it returns the width and height property value as a unit-less pixel value (e.g., 400). In contrast, the css("width") or css("height") methods return values with units (e.g., 400px).
innerWidth() and innerHeight() MethodsThe jQuery innerWidth() and innerHeight() methods retrieve or set the inner width and inner height of the element, respectively. These dimensions include the padding but exclude the border and margin on the element. The following example will return the inner width and height of a <div> element when a button is clicked.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").innerWidth();
var divHeight = $("#box").innerHeight();
$("#result").html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
});
});
</script>Similarly, you can set the inner width and height of an element by passing a value as a parameter to the innerWidth() and innerHeight() methods. These methods adjust only the width or height of the element's content area to match the specified value.
For example, if the current width of the element is 300 pixels and the combined left and right padding equals 50 pixels, setting the inner width to 400 pixels will result in a new width of 350 pixels, calculated as New Width = Inner Width - Horizontal Padding. Likewise, you can estimate the change in height when setting the inner height.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").innerWidth(400).innerHeight(300);
});
});
</script>outerWidth() and outerHeight() MethodsThe jQuery outerWidth() and outerHeight() methods retrieve or set the outer width and outer height of the element, respectively. These dimensions include padding and border but exclude the margin on the element. The following example will return the outer width and height of a <div> element when a button is clicked.
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth();
var divHeight = $("#box").outerHeight();
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>You can also retrieve the outer width and height of an element, which includes padding, border, and margin, by specifying the true parameter for the outer width methods, such as outerWidth(true) and outerHeight(true).
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth(true);
var divHeight = $("#box").outerHeight(true);
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>Similarly, you can set the outer width and height of an element by passing a value as a parameter to the outerWidth() and outerHeight() methods. These methods adjust only the width or height of the element's content area to match the specified value, similar to the innerWidth() and innerHeight() methods.
For example, if the current width of the element is 300 pixels, the combined left and right padding equals 50 pixels, and the combined width of the left and right border is 20 pixels, setting the outer width to 400 pixels will result in a new width of 330 pixels, calculated as New Width = Outer Width - (Horizontal Padding + Horizontal Border). Similarly, you can estimate the change in height when setting the outer height.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").outerWidth(400).outerHeight(300);
});
});
</script>