I want to get the real height of a div class = "group-members" in the browser console
The block continues to load when the page scrolls to the bottom
I wrote something like this to get its height:
var h = window.getComputedStyle(document.getElementsByClassName('group-members'), null).getPropertyValue('height');
window.scroll({
top: h,
left: 0,
behavior: 'smooth'
});
when I run these code it comes back
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
So what's wrong? How can I get the height of this variable div?
clientHeight - CSS height + padding
offsetHeight - CSS height + padding + borders
scrollHeight - equal to clientHeight
getBoundingClientRect() - return left, top, right, bottom, x, y, width, and height properties
getComputedStyle() - returns all CSS properties of an element
HTMLElement.style - returns defined Style of element
const clientHeight = document.getElementById('group-members').clientHeight;
console.log('client Height : ', clientHeight);
const offsetHeight = document.getElementById('group-members').offsetHeight;
console.log('offset Height : ', offsetHeight);
const scrollHeight = document.getElementById('group-members').scrollHeight;
console.log('scroll Height : ', scrollHeight);
const getBoundingClientRectHeight = document.getElementById('group-members').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);
const styleElementHeight = getComputedStyle(document.getElementById("group-members")).height;
console.log('style Element Height : ', styleElementHeight);
const styleHeight = document.getElementById('group-members').style.height;
console.log('style Height : ', styleHeight);<div id="group-members" style="margin:10px;padding:20px;height:100px;">
<h1>H1 Tag</h1>
<p>P Tag</p>
<button>Button</button>
</div>You need to pass a single element to window.getComputedStyle
So you should do this instead:
window.getComputedStyle(document.querySelector('.group-members'))