jQuery outerWidth() Method
You are Here:
jQuery outerWidth() Method
The jQuery outerWidth()
method gets the outer width (including padding, border, and optionally margin) of the FIRST matched element.
outerWidth() without Margin
In the following example, we will exclude the margin from outer width by leaving the boolean value to default (false).
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
border: 2px solid black;
height: 100px;
width: 100px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>jQuery outerWidth() Method</h1>
<div></div>
<p>Click on the button to find the outerWidth of div (include padding and border).</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").outerWidth());
});
});
</script>
</body>
</html>
Syntax
$(selector).outerWidth(bool);
Parameter Values
Value | Type | Explanation |
---|---|---|
bool | Optional | Specifies whether or not to include the margin. Possible values are
|
outerWidth() with Margin
In the following example, we will include the margin from outer width by setting the boolean value to true.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
border: 2px solid black;
height: 100px;
width: 100px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>jQuery outerWidth() Method</h1>
<div></div>
<p>Click on the button to find the outerWidth of div (include padding, margin and border).</p>
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").outerWidth(true));
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.