我的 class 的 .style 在 javascript 中为 null

Question

我有一个简单的网页，顶部有一个 div，其中包含：

<div class="divmain-login">
    <div class="divmain-sup-login">
        <div class="textos">
            <h1>Manejo de archivos</h1>
            <h2>Gaspar Giménez 2021</h2><h3>v 1.2</h3>
        </div>
    </div>
</div>

我想用这个 JS 代码得到这个块的属性高度（用 class .divmain-sup-login）：

function setDivSupHeight(){
const DivSup = document.querySelector(".divmain-sup-login");
console.log(DivSup.getAttribute("style"));

    const divh = DivSup.style.height;
    console.log(divh);
}

    setDivSupHeight();

控制台returns这个：

空（第 3 行）

无（第 7 行）

属性样式returns为空，这是CSS:

.divmain-sup-login{
position: sticky;
background-color: #F56D7B;
text-align: center;
width: 100vw;


height: 90px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
}

我不知道如何获得这个块的高度。

Answer 1

Element.getAttribute('style') 和 Element.style 指的是元素的 style="..." 属性 - 不是来自样式规则或最终计算样式的任何内容，在您的情况下未使用该属性确实如此，它的价值是 null.

您实际上可能想要的是 Element.getComputedValue().getProperty()，参见 https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

我的 class 的 .style 在 javascript 中为 null

The .style of my class is null in javascript

html

javascript

css

height

class