如何实现div子元素的getComputedStyle？

Question

抱歉，提前为ESL选择单词。我想得到的是相邻(?)的一个getComputedStyle的h3。或相关的(?)对于具有特定类(mainBook)的div，而h3没有任何类。

下面是CSS的一个示例：

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

我知道如何getComputedStyle of mainBook：

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

下面是HTML：

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

不确定这是否有帮助，但：

​

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>

​

但是，除了h3，还有什么办法可以做到吗？

谢谢!

Answer 1

1)可以将h3元素作为

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

并将其lineHeight从computedStyle获得如下所示：

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)还可以从mainBook元素中获取h3元素，如下所示：

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>

​