Updated March 23, 2023
Introduction to jQuery Outerwidth()
This jQuery article talks about one of the dimensions methods provided by jQuery library, outerWidth() method. jQuery provides various dimensions methods such as height(), width(), innerHeight(), innerWidth(), outerHeight() and outerWidth() to manipulate CSS dimensions of the DOM elements. Here, we are going to learn about how to use the outerWidth() method to get or set the dimensions of a DOM element. jQuery outerWidth() method is used to get the outer width ( padding + border + optionally margin) of the first matched element.
This method returns the width of the matched element, which includes left and right padding, border and margin(option) in pixels. To include a margin in the calculation, outerWidth(true) is used. outerWidth() works for both hidden and visible elements. It is not applicable to document or window For such objects width() method is used. If this method is applied to an empty set of elements, it returns undefined.
Methods of jQuery Outerwidth()
Some of the related methods are mentioned below:
- height(): This method gets or sets the height of an element.
- width(): This method gets or sets the width of an element.
- innerHeight(): This method returns the height of an element which includes padding but not border or margin.
- innerWidth(): This method returns the width of an element which includes padding but not border or margin.
- outerHeight(): This method returns the height of an element that includes both border and padding.
Diagram illustrating different dimensions of a DOM element.
Syntax:
$(selector).outerWidth(includeMargin)where,
1. selector is the selected HTML element.
2. includeMargin is an optional parameter.
It is a Boolean value which specifies whether the margin is to be included or
- If value is true, it means margin is to be
- If value is false, it means margin is not to be included, false being the default
Implementation of jQuery outerWidth() method
Let us now go through some examples which will give a better understanding of jQuery outerWidth() method.
Example #1
Following is a simple example showing how exactly the outerWidth() method works. In this example, outerWidth() method is used to return the outer width of the selected <div> element. In this case, the value of outerWidth includes padding and border but not margin.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 300px; height: 100px; padding: 120px; font-size: medium; text-align: center; margin: auto;
font-weight: bold; border: 3px solid teal; margin-top: 50px; margin-bottom: 10px;
}
button {
background: lightblue; color: maroon;
border-radius: 30px; padding: 15px;
font-weight: bold; border: none; margin: auto; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("#btn").click(function() {
var divWidth = $("div").outerWidth();
$("#result").html("Outer Width: " + divWidth + " pixels");
});
});
</script>
</head>
<body>
<div>
<button id="btn">
Click here to get the outer width of the div
</button>
<p id="result"></p>
</div>
</body>
</html>Output
- The below screenshot is captured when the page is initially loaded in the browser.
- No activity has been performed till now.
- Once the button is clicked, outerWidth() method returns the calculated width of the selected <div>.
- For the given <div>, width is 300 pixels, the sum of both the left and right padding is 240 pixels and the sum of left and the right border is 6 pixels. Outer width of the <div> is calculated as below:
Outer Width = 300 + 240 + 6 pixels = 546 pixels- This calculation excludes the margin value.
Example #2
Let us now see an example where the outerWidth() method returns the calculated outer width of a selected element where the margin is also included.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> div {
width: 300px; height: 100px; padding: 120px; font-size: medium; text-align: center; margin: auto;
font-weight: bold; border: 3px solid teal; margin-top: 50px; margin-bottom: 10px;
}
button {
background: lightblue; color: maroon;
border-radius: 30px;
padding: 15px;
font-weight: bold; border: none; margin: auto; cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
$("#btn").click(function() {
var divWidth = $("div").outerWidth(true);
$("#result").html("Outer Width(true): " + divWidth + " pixels");
});
});
</script>
</head>
<body>
<div>
<button id="btn">
Click here to get the outer width of the div imcluding margin
</button>
<p id="result"></p>
</div>
</body>
</html>Output
- Below is the screenshot that was taken when the page is initially loaded in the browser.
- No activity has been performed until now.
- Once the button is clicked, outerWidth() method returns the calculated width of the selected <div>.
- This calculation includes padding, border, and margin as well.
Example #3
The below example uses the outerWidth() and outerWidth(true) method to get the outer width of the selected div including and excluding margin.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> #div1 {
width: 100px; height: 50px; margin:10px; padding:10px; cursor: pointer;
border:2px solid black; background-color:teal;
}
#div2 {
width: 100px; height: 50px; margin:20px; padding:20px; cursor: pointer;
border:2px solid black; background-color:cornflowerblue;
}
#div3 {
width: 100px; height: 50px; margin:30px; padding:30px; cursor: pointer;
border:2px solid black; background-color:lightcoral;
}
</style>
<script>
$(document).ready(function() {
$("div").click(function() {
var color= $(this).css("background-color");
var divWidthtrue = $(this).outerWidth(true);
var divWidth = $(this).outerWidth();
$("#p1").html("Outer Width with Margin: " + divWidthtrue + " pixels");
$("#p2").html("Outer Width without Margin: " + divWidth + " pixels");
$("#p1").css({'color': color});
$("#p2").css({'color': color});
});
});
</script>
</head>
<body>
<div id="div1">Click Me</div>
<div id="div2">Click Me</div>
<div id="div3">Click Me</div>
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
</html>Output
- Once the above code is run, the output is as shown below in the screenshots.
- There are three different div(s), div1, div2 and div3 with different colors and dimensions.
- Each time a div is clicked, the outer width of that div is displayed for both the cases, including margin as well as excluding margin.
Conclusion
- This jQuery article demonstrated the working and use of jQuery outerWidth()
- This method is used to get the current calculated outer width of the selected element.
- Outer width is the sum of padding, border and optionally margin.
- The value returned by the outerWidth() method may not be always accurate in case of hidden elements.
- To ensure the value is accurate, the element should be visible.
Recommended Articles
This is a guide to jQuery Outerwidth(). Here we discuss the basic concept, how to use the outerWidth() method to get or set the dimensions of a DOM element. You may also look at the following article –
