jQuery set and get inner height and width of element; Through this tutorial, i am going to show you how to set or get innerWidth and innerHeight of selected html elements like div, span tag, button tag, input box, etc, using jQuery method innerWidth() & innerHeight().
jQuery Set & Get innerWidth & innerHeight Of Html Elements
There are two methods available in jQuery, which is used to set and get inner height and width of html elements; as shown below:
- jQuery innerWidth() method
- jQuery innerHeight() method
jQuery innerWidth() method
jQuery offers various method to manipulating html elements. The jQuery innerWidth() methods get or set the innerWidth of the selected html elements.
Syntax innerWidth() Method
$("selector").innerWidth();
Using the above syntax Get innerWidth of elements
$("selector").innerWidth(value);
You can use this jquery innerWidth() syntax for Set the width of elements.
Example for jquery set and get inner width of element
See the following example for how to set or get the innerWidth of selected HTML elements using the jQuery innerWidth () method; as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get & Set Inner Width of an Element</title>
<style type="text/css">
#div_box_body{
width: 175px;
height: 150px;
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").innerWidth();
$("#output").html("Before Set Width: " + GetWidth);
var SetWidth = $("#div_box_body").innerWidth(200);
$("#set_width").html("After Set - Width: " + 200);
});
});
</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 Inner Width</button>
<p id="output"></p>
<p id="set_width"></p>
</body>
</html>
Demo for jquery set and get inner width of element
jQuery innerHeight() method
jQuery offers various method to manipulating html elements. The jQuery innerHeight() methods get or set the innerHeight of the selected html elements.
Syntax innerHeight () Method
$("selector").innerHeight();
Using the above syntax Get innerHeight of elements
$("selector").innerHeight(value);
You can use this jquery innerHeight () syntax for Set the height of elements.
Example for jquery set and get inner height of element
See the following example for how to set or get the innerHeight of selected HTML elements using the jQuery innerHeight () method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get & Set Inner Height of an Element</title>
<style type="text/css">
#div_box_height{
width: 175px;
height: 150px;
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").innerHeight();
$("#output_height").html("Before Set Height: " + heightWidth);
$("#div_box_height").innerHeight(200); // set the height of box
$("#set_height").html("After Set - Height: " + 200);
});
});
</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 Height</button>
<p id="output_height"></p>
<p id="set_height"></p>
</body>
</html>