How To Get Height and Width of HTML Element in JavaScript
By Saruque Ahamed MollickHello, here I am going to show you how to get height and width of HTML element in JavaScript in many ways.
All of us are familiar with what is a height and what is a width. So in this post, you will learn to fetch the height and width of any HTML element using JavaScript.
There are many ways to get the size of an HTML element in JavaScript. Even we can use jQuery here.
So I will show you most of those methods to get the height and width of an HTML element.
In this post, we are going to learn the following things.
- get the height and width of an HTML element or div element from the CSS style height and width using JavaScript.
- Using Element.getBoundingClientRect() method get the size of the HTML element.
- .offsetWidth and .offsetHeight method to get the height and width of an HTML element if size is not defined in the CSS style.
You may also read,
How to Hide Cursor In JavaScript or CSS very Easily
How to Create A Countdown Timer with Progress Bar in JavaScript
Get height and width of HTML element in JavaScript from the CSS style
The below method will help you to get the size of an HTML if the size ( height and width) is defined in style.
<script type="text/javascript">
var height=document.getElementById('id_here').style.height;
</script>.height property is the property of style here so we have used object.style.height
Example,
<!DOCTYPE html>
<html>
<head>
<title>Get the height and width of HTML Element</title>
</head>
<body>
<div id="id_here" style="height: 20px">This is an HTML element</div>
<div id="height"></div>
<script type="text/javascript">
var height=document.getElementById('id_here').style.height;
document.getElementById('height').innerHTML= height;
</script>
</body>
</html>- Moreover, you can also get the width in the same way. You just need to replace height with width.
var width=document.getElementById('id_here').style.width;Bottom Sticky Music Player Source Code in JavaScript and CSS
How to Play Audio After Few Seconds or Delay in JavaScript
Get height and width of HTML Element if size is not defined in CSS style
In JavaScript, we can easily get the size of an HTML element if the height and width are not defined in the CSS style by using offsetHeight and offsetWidth.
Here is the JavaScript code :
<script type="text/javascript">
var height=document.getElementById('id_here').offsetHeight;
</script>Here is the example:
<!DOCTYPE html>
<html>
<head>
<title>Get the height and width of HTML Element</title>
</head>
<body>
<div id="id_here">This is an HTML element</div>
<div id="height"></div>
<script type="text/javascript">
var height=document.getElementById('id_here').offsetHeight;
document.getElementById('height').innerHTML= height;
</script>
</body>
</html>To get the width, use the below code:
<!DOCTYPE html>
<html>
<head>
<title>Get the height and width of HTML Element</title>
</head>
<body>
<div id="id_here">This is an HTML element</div>
<div id="width"></div>
<script type="text/javascript">
var width=document.getElementById('id_here').offsetWidth;
document.getElementById('width').innerHTML= width;
</script>
</body>
</html>Get height and width of an HTML element using Element.getBoundingClientRect()
document.getElementById('id').Element.getBoundingClientRect() ;This will return an object containing the info defined in CSS Style.
So you can access it by:
var info=document.getElementById('id').Element.getBoundingClientRect() ;
var height=info.height;
var width=info.width;How To Add Browser Notification Using JavaScript
Get the height and width of an HTML element in jQuery
$('id').height();
$('id').width();Actual Syntax is :
$(selector).height();
$(selector).width();
in jQuery it is pretty much easy to get the height and width of a div element or HTML element.
If you have any query or doubt or suggestion leave a comment in the below comment section.
Leave a Reply