如何获得DIV子元素的computputedstyle？

Question

抱歉，ESL的单词选择。我要获得的是与Div相邻（？）或相关（？）的H3的GetComputedStyle，该DIV具有特定类（主题），而H3则没有。

这是CSS的一个示例：

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

我知道如何获得主本书的ComcomputedStyle：

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');

并从 compulatedStyle 获取其 lineHeight ，如下所示：

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>