jQuery set and get outer height and width of html elements; Through this tutorial, i am going to show you how to set or get outer Width and outer Height of html elements like div tag, span, button, textarea, input box etc using jQuery method outerWidth() & outerHeight().
jQuery Get & Set Outer Height & Width Of Html Elements
There are two jquery methods for set and get outer height and width of html elements; as shown below:
- jQuery outerWidth() method
- jQuery outerHeight() method
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 set and get outer width element
See the following example for how to set or get the outerWidth of selected HTML elements using the jQuery outerWidth () method; as shown below:
<!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>
Demo for jquery set and get outer width element
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 get and set outer height of element
See the following example for how to set or get the outerHeight of selected HTML elements using the jQuery outerHeight () method; as shown below:
<!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>