Updated April 6, 2023
Definition of jQuery offsetHeight
In jQuery, we can get the height of an element by using the offsetheight property in it. It is an in-built property of jQuery we can use it directly to get the viewable height of an element. This height includes the border, padding, and scroll but it does not contain the margin, this we will check by an example in the coming section of the tutorial. We can directly call or use this property on an element to get its viewable height, here ‘viewable’ means the height which is visible to the user will be returned by this property, but it can happen than the height of an element is taller or bigger than the visibility of it. In short, it will return us the height of an element that is visible. In the coming section of the tutorial, we will see its internal working and how we can use this property on an element to get its height, its usage, and implementation in detail for better usage.
Syntax:
As we already know that it is a property that is used to get the height, let’s take a closer look at the syntax for it for better understanding and usage see below;
1) To get the height value:
e.g.:
out_element.offsetHeightAs you can see in the above syntax we are using the offsetHeight property to get the height of it. It is easy to use and implement, let’s take a closer look at the practice syntax for ore better clarity see below;
e.g.:
var ele_name = document.getElementById("your_id");
var ele_height = ele_name.offsetHeight;As you can see in this way we can use this property in jQuery, in the coming section of the tutorial we will see its internal working and how we can start using it in our program to get the height of an element.
How offsetheight works in jQuery?
As we know that offsetheight is used in jQuery to get the height of the element. By the use of it, we can get the element height just by calling this property on that element. Also, it is very easy to use and handle by the developers. It is also the part of jQuery library so we do not require to include any external library or packages to use this in our program. In this section we will first see the idea behind the offsetheight property in jQuery followed by the one example to understand its internal working in jQuery, let’s get started to see below;
1) offsetheight: This property is used to get the height of the element, but it only returns the viewable height of the element. This means an element can have a taller height than it is visible to the user or on the page, but this property will only return us the visible height as result. This property also includes some parameters while returning the result such as:
a) padding
b) border
c) scroll
But it does not include the margin as the height of the element. We used this property together with the offsetwidht property in jQuery. By the use of this property, we can only get the height but we are not supposed to modify the height of the element, by the use of this height. In short, the purpose of this method is to only return the height of the element but we cannot modify it by using it because it does not take any element as a parameter. Now we will have to look at the internal working of this method in detail let’s get started, we will understand its working by a sample piece of code in jQuery see below;
e.g.:
<script>
function demo() {
var myele = document.getElementById("demoId");
var eleheight = myele.offsetHeight;
console.log(eleheight);
}
</script>In the above line of code, we have created a script to understand the internal working of offsetHeight in jQuery, inside the function we are trying to use the offsetHeight property we have, first, we will get the element by the use of .getElementById() method, I have one element named as ‘demoed in my HTML. For this element, I want to print the height. After getting the element, we are trying to get the height of the element by using the offsetHeight property. We have just called the property based on the element we have got. After this, we are storing the height inside one variable called height, and trying to print it on the console, so now the offsetHeight property will return us the height of the element on the console. Now let’s took a look at the supported bowers which support this property of jQuery, which are below;
Browsers support:
a) Chrome
b) Internet explorer
c) Firefox
d) opera
Return value of offsetHeight: it will return us an integer value in px which represents the height of the element including padding, border, scrollbar but not the margin as the return result.
Examples
1) Below is the simple example to show offsetHeight in jQuery, this is a basic example for using offsetheight() in jQuery for beginners. Also, we have print all the details about the element style.
Example #1
<!DOCTYPE html>
<html>
<head>
<style>
#myelement {
height: 280px;
width: 450px;
padding: 15px;
margin: 10px;
border: 7px solid green;
background-color: #f7da1e;
}
</style>
</head>
<body>
<button onclick="demofunction()">Click me!!!</button>
<script>
function demofunction() {
var checkele = document.getElementById("myelement");
var result = "offsetHeigth result is ::" + checkele.offsetHeight + "px<br><br>";
document.getElementById("checkid").innerHTML = result;
}
</script>
<h3>Demo to show offsetheight to get element height !!</h3><br>
<div id="myelement">
<span>Details of div ::</span>
Height: 280px <br>
Width: 450px <br>
padding: 15px <br>
margin: 10px <br>
border: 7px <br>
<p id="checkid"></p>
</div>
</body>
</html>Output:
After clicking on the button, the output will be
Conclusion
We have already seen the usage and implementation of the offsetHeight property in jQuery, it is used to get the height, is easy to use, readable, and easy to handle by the developers. We have also seen some e examples to understand this in a better way.
Recommended Articles
This is a guide to jQuery offsetHeight. Here we discuss the Definition, syntax, How offsetheight works in jQuery? examples with code implementation. You may also have a look at the following articles to learn more –
