如何获取div子元素的ComputedStyle？

Question

提前对ESL选词表示抱歉。我想要得到的是 h3 的 getComputedStyle，它与具有特定 class（mainBook）的 div 相邻（？）或相关（？），而 h3 没有任何。

这是 CSS 的示例：

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

我知道如何获取mainBook的ComputedStyle：

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

并从 computedStyle 得到它的 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>

如何获取div子元素的ComputedStyle？

How to getComputedStyle of sub-element of div?

html

javascript

css

document

getcomputedstyle