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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Width & Height Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#div1 {
width: 300px;
height: 150px;
border: 2px solid black;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1">This is a div.</div>
<button>Show Width & Height</button>
<script>
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "<br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt); // Display width and height inside the div
});
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery innerWidth & innerHeight Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#div1 {
width: 300px;
height: 150px;
padding: 20px;
border: 2px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1">This is a div.</div>
<button>Show Inner Width & Height</button>
<script>
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "<br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt); // Display inner width and height inside the div
});
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery outerWidth & outerHeight Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#div1 {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1">This is a div.</div>
<button>Show Outer Width & Height</button>
<script>
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "<br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt); // Display outer width and height inside the div
});
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Outer Width & Height with Margin</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#div1 {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
</style>
</head>
<body>
<div id="div1">This is a div.</div>
<button>Show Outer Width & Height (with margin)</button>
<script>
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "<br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt); // Display outer width and height including margin
});
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Document & Window Dimensions</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
height: 1200px; /* Make the page scrollable to see document size */
}
</style>
</head>
<body>
<button>Show Document & Window Size</button>
<script>
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width() + " x " + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width() + " x " + $(window).height();
alert(txt);
});
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Set Width & Height</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: lightblue;
border: 2px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1">Resize me!</div>
<button>Set Width & Height to 500px</button>
<script>
$("button").click(function(){
$("#div1").width(500).height(500); // Set new width and height
});
</script>
</body>
</html>
This is useful for dynamically resizing elements based on user
interactions or layout requirements.
More topic in jQuery
