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?

CodePudding user response：

1. clientHeight - CSS height padding

2. offsetHeight - CSS height padding borders

3. scrollHeight - equal to clientHeight

4. getBoundingClientRect() - return left, top, right, bottom, x, y, width, and height properties

5. getComputedStyle() - returns all CSS properties of an element

6. 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>

CodePudding user response：

You need to pass a single element to window.getComputedStyle

So you should do this instead:

window.getComputedStyle(document.querySelector('.group-members'))