How to getComputedStyle of sub-element of div?

Question

Sorry in advance for the ESL choice of words. What I'm trying to get is the getComputedStyle of an h3 that's adjacent (?) or related (?) to a div which has a specific class (mainBook), while the h3 hasn't got any.

Here's an example of the CSS:

.mainBook 
{
     position: absolute;
}   
.mainBook h3
{
     line-height: 120px;
}

I know how to getComputedStyle of mainBook:

const element = document.querySelector('.mainBook');
const style = getComputedStyle(element);
// and then if I want: style.getPropertyValue("nameOfProperty")

Here's the HTML:

<div class="mainBook">
        <h3>Title</h3>
</div>

Not sure if this helps but:

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>

But is there any way to do the same but for h3?

Thanks!

Answer 1

1) You can get h3 element as

const element = document.querySelector('.mainBook h3');

and get its lineHeight from computedStyle as:

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) You can also get h3 element from mainBook element as:

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>