通过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属性是一种访问和设置内联样式的方法(即类似于样式属性).

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

span {
    color: inherit;
}

getComputedStyle虽然会给出最终的计算值,但它也会获取继承的值.