通过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会给出最终的计算值，所以它也会选择继承的值。