Before you click on the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image8-22.png" data-lazy- height="197" src="data:image/svg xml,” width=”640″>
After clicking the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image10-15.png" data-lazy- height="195" src="data:image/svg xml,” width=”657″>
element has been changed.
Heigth() Method
This method works in a similar way to the width() method, with the obvious difference that it is used to give or fetch the height of HTML elements.
This method also works in a way that when it is used only to fetch the height of an element it extracts the height of the first element that matches the specified element, however, when used for setting the height, it sets the height of all matched elements.
Syntax
For fetching the height of an element.
For setting the height of an element
$(selector).height(value)
Example
Suppose you want set some height of an element using the jQuery height() method. Follow the code below.
HTML
Enter your name: <input type=“text” style=“background-color: lightpink; height: 10px; width:200px;”><br>
<br><button>Display the height of input field</button>
Here we have created, an input field and set a height of 10px, width of 200px, and background color pink.
Moreover, we have aslo created a button.
jQuery
$(document).ready(function(){
$(“button”).click(function(){
$(“input”).height(20);
});
});
We have used the jQuery height() method here to change the height of the input field. The height will change when you click on the button.
Output
Before you click on the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image9-19.png" data-lazy- height="98" src="data:image/svg xml,” width=”421″>
After the button is clicked.
The height() method is working properly.
innerWidth() Method
For the purpose of fetching the inner width of the first element that matches the specified element, the innerWidth() method is used.
Syntax
Example
Suppose you want to display the innerWidth of an image. Use the following code.
HTML
<img src=“dog.jpg” alt=“Dog” style=“height: 150px; width:200px; padding: 5px; border: 2px solid black;”></img><br>
<button>Display the inner width of image</button>
Here we have displayed an image using the ![]()
tag, moreover, we have set its height, width, padding, and border. Along with the image, we have also created a button that will be used to display the inner width of the image.
jQuery
$(document).ready(function(){
$(“button”).click(function(){
alert(“Inner width of image: “ $(“img”).innerWidth());
});
});
In the above code, we are using the innerWidth() method to display the inner width of the image.
Output
Before the button is clicked.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image11-11.png" data-lazy- height="257" src="data:image/svg xml,” width=”350″>
After the button is clicked.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-48.png" data-lazy- height="262" src="data:image/svg xml,” width=”936″>
The inner width of the image has been displayed.
Note: The innerWidth() method includes padding as well while displaying the inner width of an element.
innerHeight() Method
The innerHeight() method is used for fetching the inner height of the first element that matches the specified element.
Syntax
$(selector).innerHeight()
Example
We are going to use the example used in the above section to understand the working of the jQuery innerHeight() method.
jQuery
$(document).ready(function(){
$(“button”).click(function(){
alert(“Inner height of image: “ $(“img”).innerHeight());
});
});
We have used the innerHeight() method to extract the inner height of the dog image.
Output
Before you click the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-45.png" data-lazy- height="254" src="data:image/svg xml,” width=”359″>
After you click on the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-45.png" data-lazy- height="264" src="data:image/svg xml,” width=”940″>
The innerHeight() method is working properly.
Note: The innerHeight() method also includes padding as well while displaying the inner height of an element.
outerWidth() Method
For the purpose of fetching the outer width of the first element that matches the specified element, the outerWidth() method is used.
Syntax
Example
Suppose you want to extract the outer width of a div element. Here is how you do it.
HTML
<div style=“background-color: bisque; height:100px; width:200px; padding: 10px; border:2px solid gray;”></div><br>
<button id=“button”>Outer width of div</button>
We have created a div and given it a certain background color, height, width, padding, and border. Furthermore, we have also created a button.
jQuery
$(document).ready(function(){
$(“button”).click(function(){
alert(“Outer width of div: “ $(“div”).outerWidth());
});
});
Here we have used the jQuery outerWidth() method to display the outer width of the div element.
Output
Before the button gets clicked.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-44.png" data-lazy- height="227" src="data:image/svg xml,” width=”343″>
When the button is clicked.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image7-30.png" data-lazy- height="229" src="data:image/svg xml,” width=”943″>
The outerWidth() method is working properly.
Note: The outerWidth() method calculates padding as well border while displaying the outer width of an element.
outerHeight() Method
The outerHeight() method is used for fetching the outer height of the first element that matches the specified element.
Syntax
$(selector).outerHeight()
Example
We are going to use the example used in the above section to understand the working of the jQuery outerHeight() method.
jQuery
$(document).ready(function(){
$(“button”).click(function(){
alert(“Outer height of div: “ $(“div”).outerHeight());
});
});
We have used the outerHeight() method to extract the outer height of the div element.
Output
Before you click on the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-31.png" data-lazy- height="224" src="data:image/svg xml,” width=”325″>
After you click on the button.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image6-29.png" data-lazy- height="233" src="data:image/svg xml,” width=”928″>
The outerHeight() method is working properly.
Note: The outerHeight() method also includes padding as well border while displaying the outer height of an element.
Conclusion
The dimensions of an HTML element can be set using the various jQuery methods which are; width(), height(), innerWidth(), innerHeight(), outerWidth(), and outerHeight(). The width() and height() methods sets or fetches the width and height of elements, respectively. While the innerWidth(), innerHeight(), outerWidth(), and outerHeight() method fetches the inner width, inner height, outer width, and outer height of the first matched elements respectively. All of these methods are explained in detail along with the relevant examples.
