javascript - 通过 Javascript 继承 CSS 值

Question

在我的页面上，我正在通过 javascript 更改一些 css 样式。当我尝试提取一个已继承的值时 - 它出现空白。请考虑以下事项:

    .Sliding
    {
        display: none;
        overflow: hidden;
    }

    .Sliding #FilterBox
    {
        height: 185px;
        background-color: Fuchsia;
    }

和 html:

<div class="Sliding" id="FilterBox">
        <h3>Test Form</h3>
        This is a test/<br />
        12345
</div>

如果我查看元素“document.getElementById(objname).style.display”，它是空白的吗？如何通过 javascript 读取显示值？

Answer 1

您需要使用 getComputedStyle .

.style 属性是一种访问和设置内联样式的方法(即类似于 style 属性)。

但是请注意，您的示例与继承无关。只是直接应用于您感兴趣的元素的规则集。继承是指元素通过 inherit 关键字采用与其父元素相同的样式。

span {
    color: inherit;
}

getComputedStyle 会给出最终的计算值，因此它也会获取继承的值。