Get the height and width of HTML Element

How To Get Height and Width of HTML Element in JavaScript

Hello, 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.

1. get the height and width of an HTML element or div element from the CSS style height and width using JavaScript.
2. Using Element.getBoundingClientRect() method get the size of the HTML element.
3. .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,

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.

.height property is the property of style here so we have used object.style.height

     
This is an HTML element
   

1. 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;

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 :

     
This is an HTML element
   

To get the width, use the below code:

     
This is an HTML element
   

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.

var info=document.getElementById('id').Element.getBoundingClientRect() ; var height=info.height; var width=info.width;

Get the height and width of an HTML element in jQuery

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.

Источник

How to get the rendered height of an element ?

To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height.

• style.height
• jQuery( height, innerHeight, outerHeight )
• clientHeight, offsetHeight, scrollHeight
• getComputedStyle
• getBoundingClientRect().height

Rendered height is the height that the element gets finally after all the styles and transformations are applied on that element. For example, An element has height of 100px and then gets a transform:scale(0.5). Its rendered height is 50px (after the transformation) and layout height is 100px.

style.height We can use style.height on any selected element and it will return its height. Does not include the padding, border or margin. Italways return the height along with the specific unit.

Note: Only works if we explicitly set the height as inline using the style attribute in HTML.

let height = document.getElementById("someId").style.height;

HTML

Output:
It returns empty string for “div1” and it returns “100px” for “div2”

• For “div1”:
• For “div2”:

Conclusion: It returns whatever height is specified in inline style attribute only. It does not factor in any transformations, like scale. It is not reliable and should not be used as inline styles are not ideal.

jQuery(height, innerHeight, outerHeight)
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value.

Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.

HTML

Output:
It returns unit-less pixel value as 100.

Output:

innerHeight() It returns the current height of the element including the top and bottom padding but not border. It always returns a unit-less pixel value.

let height = $("#div1").innerHeight();

HTML

Output:
It returns 120 which is (10(top padding) + 100(content height) + 10(bottom-padding))

outerHeight() It returns the current height of the element including the padding, border and margin optionally. It always returns a unit-less pixel value.

let height = $("#div1").outerHeight(); let height = $("#div1").outerHeight();

HTML

(1(top border)+ 10(top padding)+ 100(content height)+1 0(bottom-padding)+ 1(bottom border)

Note: The value reported by height(), innerHeight() and outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get accurate results, ensure the element is visible before using these methods. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

// If you need height of div excluding margin/padding/border $('#div1').height(); // If you need height of div with padding but without border + margin $('#div1').innerHeight(); // If you need height of div including padding and border $('#div1').outerHeight(); // For including border + margin + padding, can use $('#div1').outerHeight(true);

All these return only the layout height, not the rendered height.

clientHeight, offsetHeight, scrollHeight
clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.

let height = document.getElementById("div1").clientHeight;

Источник

Document getelementbyid height javascript

Last updated: Jan 11, 2023
Reading time · 3 min

# Set the Width and Height of an Element using JavaScript

Use the style.width and style.height properties to set the width and height of an element, e.g. box.style.width = ‘100px’ .

The width and height properties set the element’s width and height to the supplied values.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="box" style="background-color: salmon">Box 1div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; 

The style object allows us to set, read or update any CSS property on the element.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; console.log(box.style.width); // 👉️ "100px" console.log(box.style.height); // 👉️ "100px" 

# Setting width and height has no effect on inline elements

Note that setting the width and height on an inline element, such as a span has no effect.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> span id="box" style="background-color: salmon">Box 1span> script src="index.js"> script> body> html> 

And here is our attempt to update the element’s height and width.

Copied! 
const box = document.getElementById('box'); // ❌ Set width to 100px box.style.width = '100px'; // ❌ Set height to 100px box.style.height = '100px'; 

If you open your browser, you will see that the element’s width and height are determined by the content area.

# Setting the element’s display to inline-block

To solve this, we can set the element’s display property to inline-block .

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> span id="box" style="background-color: salmon; display: inline-block" >Box 1span > script src="index.js"> script> body> html> 

And now we can set the element’s width and height.

Copied! 
const box = document.getElementById('box'); // ✅ Set width to 100px box.style.width = '100px'; // ✅ Set height to 100px box.style.height = '100px'; 

Some examples use the setAttribute method to update the element’s height and width, however, the setAttribute method overrides the style property completely.

Copied! 
const box = document.getElementById('box'); box.setAttribute('style', 'width: 100px; height: 100px'); 

The setAttribute method takes 2 parameters:

1. The name of the attribute we want to set on the element.
2. The value that should be assigned to the attribute.

If the attribute already exists, the value is updated, otherwise, a new attribute is added with the specified name and value.

So if you use the setAttribute method approach, you are effectively replacing the element’s style attribute value.

This can be very confusing and difficult to debug, so it’s best to set any CSS properties using the style object on the element.

# Set the Width and Height on a Collection of Elements

If you need to set the width and height on a collection of elements, you have to:

1. Select the collection of elements.
2. Use the for. of method to iterate over the collection.
3. Set the width and height using the style.width and style.height property on each element.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div class="box" style="background-color: salmon">Box 1div> div class="box" style="background-color: salmon">Box 2div> div class="box" style="background-color: salmon">Box 3div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const boxes = document.querySelectorAll('.box'); for (const box of boxes)  box.style.width = '100px'; box.style.height = '100px'; > 

We used the document.querySelectorAll method to select all elements with a class of box .

We then used the for. of loop to iterate over the collection and set the width and height properties on each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник