Quiero obtener la altura real de una class = "group-members" en la consola del navegador
El bloque continúa cargándose cuando la página se desplaza hacia abajo.
Escribí algo como esto para obtener su altura:
var h = window.getComputedStyle(document.getElementsByClassName('group-members'), null).getPropertyValue('height'); window.scroll({ top: h, left: 0, behavior: 'smooth' });cuando ejecuto este código vuelve
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.¿Así que qué hay de malo? ¿Cómo puedo obtener la altura de esta variable div?
clientHeight - altura CSS + relleno
offsetHeight - Altura CSS + relleno + bordes
scrollHeight - igual a clientHeight
getBoundingClientRect() - devuelve las propiedades izquierda, arriba, derecha, abajo, x, y, ancho y alto
getComputedStyle() - devuelve todas las propiedades CSS de un elemento
HTMLElement.style - devuelve el estilo definido del elemento
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>Debe pasar un solo elemento a window.getComputedStyle
Así que deberías hacer esto en su lugar:
window.getComputedStyle(document.querySelector('.group-members'))