To set or get outerWidth and outerHeight of selected html elements using jQuery; In this jQuery tutorial set & get Outer height and Outer width of selected html elements. You will learn how to get or set dimensions of selected html element’s using jQuery method outerWidth() & outerHeight().
Set & Get Outer Heigth & Width
jQuery outerWidth() method
jQuery offers various method to manipulating html elements. The jQuery outerWidth() methods get or set the outerWidth of the selected html elements.
Syntax outerWidth() Method
$("selector").outerWidth();
Using the above syntax Get outerWidth of elements
$("selector").outerWidth(value);
You can use this jquery outerWidth() syntax for Set the width of elements.
Example for jQuery outerWidth() method
This example will demostrate, you how to set or get the outerWidth of selected HTML elements using the jQuery outerWidth () method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get & Set Outer Width of an Element</title>
<style type="text/css">
#div_box_body{
width: 300px;
height: 250px;
padding: 28px;
border: 12px solid #23384E;
background: #28BAA2;
margin: 16px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_width").click(function(){
var GetWidth = $("#div_box_body").outerWidth();
$("#output").html("Before Set Width: " + GetWidth);
var SetWidth = $("#div_box_body").outerWidth(400);
$("#set_width").html("After Set - Width: " + 400);
});
});
</script>
</head>
<body>
<div id="div_box_body" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, </div>
<button type="button" id="btn_width">Get & Set Outer Width</button>
<p id="output"></p>
<p id="set_width"></p>
</body>
</html>
Output
In the above jQuery outerWidth() method example, First of all When you click on button that get selected html elements outerWidth and after that we have set outerWidth of the selected html elements and showing the current outerWidth of the box body.
jQuery outerHeight() method
jQuery offers various method to manipulating html elements. The jQuery outerHeight() methods get or set the outerHeight of the selected html elements.
Syntax outerHeight () Method
$("selector").outerHeight();
Using the above syntax Get outerHeight of elements
$("selector").outerHeight(value);
You can use this jquery outerHeight () syntax for Set the height of elements.
Example for jQuery outerHeight () method
This example will demostrate, you how to set or get the outerHeight of selected HTML elements using the jQuery outerHeight () method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get & Set Outer Height of an Element</title>
<style type="text/css">
#div_box_height{
width: 300px;
height: 250px;
padding: 28px;
text-align: justify;
border: 12px solid #23384E;
background: #28BAA2;
margin: 16px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_height").click(function(){
var heightWidth = $("#div_box_height").outerHeight();
$("#output_height").html("Before Set Outer Height: " + heightWidth);
$("#div_box_height").outerHeight(400); // set the height of box
$("#set_height").html("After Set Outer Height: " + 400);
});
});
</script>
</head>
<body>
<div id="div_box_height" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</div>
<button type="button" id="btn_height">Get & Set Outer Height</button>
<p id="output_height"></p>
<p id="set_height"></p>
</body>
</html>
Output
In the above jQuery outerHeight () method example, First of all When you click on button that get selected html elements outerHeight and after that we have set outerHeight of the selected html elements and showing the current outerHeight of the box body.
