To set or get innerWidth and innerHeight of selected html elements using jQuery; In this jQuery tutorial set & get inner height and inner width of selected html elements, we will learn how to get or set dimensions of selected html element’s using jQuery method innerWidth() & innerHeight().
Set & Get Inner Heigth & Width
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 innerWidth() method
This example will demostrate, you how to set or get the innerWidth of selected HTML elements using the jQuery innerWidth () method.
<!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>
Output
In the above jQuery InnerWidth() method example, First of all When you click on button that get selected html elements innerWidth and after that we have set innerWidth of the selected html elements and showing the current innerWidth of the box body.
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 innerHeight () method
This example will demostrate, you 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>
Output
In the above jQuery innerHeight () method example, First of all When you click on button that get selected html elements innerHeight and after that we have set innerHeight of the selected html elements and showing the current innerHeight of the box body.
