When JavaScript is editing a page, we often encounter the situation of obtaining the width and height of page elements, but because it is too normalized, it is often ignored by us.
There are many ways to obtain the width and height of an element. According to different usage situations, you can choose the most suitable way for you.
jQuery
If you are using jQuery , you can directly use $('元素').width() and $('元素').height() to get it.
console.log(`${$('#app').width()} + ${$('#app').height()}`);
JavaScript native method
style
If you use native JavaScript , you can see if you set the value in the style attribute to get it, the way: element.style.width and element.style.height .
document.getElementById('app').style.width; document.getElementById('app').style.height;
But when the style is not set, but is set in CSS through the class or ID selector, the width and height obtained by element.style are empty.
getComputedStyle()
The getComputedStyle method here is not following the element, but the method above the window.
Window.getComputedStyle()method returns an object that reports the values of all CSS properties of an element after applying the active style sheet and parsing any basic calculations those values may contain. Private CSS property values can be accessed through the API provided by the object or by simply indexing using the CSS property name.
Usage: window.getComputedStyle(element).width or window.getComputedStyle(element).getPropertyValue(width)
let dom = document.getElementById('app'); console.log(`${window.getComputedStyle(dom).width} + ${window.getComputedStyle(dom).height}`); console.log(`${window.getComputedStyle(dom).getPropertyValue('width')} + ${window.getComputedStyle(dom).getPropertyValue('height')}`);
It should be noted here that the obtained width and height will be followed by px ; and in versions below IE9, getComputedStyle is not supported.
getBoundingClientRect
The Element.getBoundingClientRect() method returns the size of the element and its position relative to the viewport.
This method can be used directly after element, and it returns the value of direct number type without px . And can support up to IE4
console.log(`getBoundingClientRect: ${dom.getBoundingClientRect().width} + ${dom.getBoundingClientRect().height}`);
Generally speaking, after JavaScript obtains the width and height of an element, it will modify the operation, which will involve rearrangement and redrawing. Generally, for performance reasons, it is best not to obtain and change the size of the element too frequently.
Note: The use of getBoundingClientRect and getComputedStyle here will also cause reflow.
The text and pictures in this article are from InfoQ
This article is reprinted from https://www.techug.com/post/javascript-gets-the-width-and-height-of-the-element.html
This site is for inclusion only, and the copyright belongs to the original author.