Lo siento de antemano por la elección de palabras de ESL. Lo que intento obtener es getComputedStyle de un h3 que es adyacente (?) o relacionado (?) a un div que tiene una clase específica (mainBook), mientras que el h3 no tiene ninguna.
Aquí hay un ejemplo del CSS:
.mainBook { position: absolute; } .mainBook h3 { line-height: 120px; }Sé cómo getComputedStyle de mainBook:
const element = document.querySelector('.mainBook'); const style = getComputedStyle(element); // and then if I want: style.getPropertyValue("nameOfProperty")Aquí está el HTML:
<div class="mainBook"> <h3>Title</h3> </div>No estoy seguro si esto ayuda, pero:
const element = document.querySelector('.mainBook'); const style = getComputedStyle(element); // and then if I want: style.getPropertyValue("line-height"); // How do I getComputedStyle the h3? .mainBook { position: absolute; } .mainBook h3 { line-height: 120px; } <div class="mainBook"> <h3>Title</h3> </div>Pero, ¿hay alguna forma de hacer lo mismo pero para h3?
¡Gracias!
1) Puedes obtener el elemento h3 como
const element = document.querySelector('.mainBook h3'); y obtenga su lineHeight de línea de estilo computedStyle como:
const style = getComputedStyle(element); let lineHeight = style.lineHeight. const element = document.querySelector('.mainBook h3'); const style = getComputedStyle(element); console.log(style.lineHeight) .mainBook { position: absolute; } .mainBook h3 { line-height: 120px; } <div class="mainBook"> <h3>Title</h3> </div> 2) También puede obtener el elemento h3 del elemento mainBook como:
const mainBookEl = document.querySelector('.mainBook'); const headingEl = mainBookEl.querySelector('h3') const style = getComputedStyle(headingEl); const lineHeight = style.lineHeight; const mainBookEl = document.querySelector('.mainBook'); const headingEl = mainBookEl.querySelector('h3') const style = getComputedStyle(headingEl); console.log(style.lineHeight) .mainBook { position: absolute; } .mainBook h3 { line-height: 120px; } <div class="mainBook"> <h3>Title</h3> </div>