通过Javascript继承CSS值 [英] Inherited CSS Values via Javascript

问题描述

在我的页面上，我通过javascript更改一些CSS样式。当我尝试并拉取一个已经继承的值 - 它是空白的。请考虑以下内容：

On my page I am changing some css styles via javascript. When I try and pull a value that has been inherited - it comes up blank. Consider the following:

    .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阅读显示值？

If I look at the element 'document.getElementById(objname).style.display' its blank? How can I read the display value via via javascript?

推荐答案

您需要使用 getComputedStyle 。

.style 属性是访问和设置内联样式的一种方法（例如style属性）。

The .style property is a means of accessing and setting inline style (i.e. like the style attribute).

但是，与继承无关。继承是指元素通过 inherit 关键字与父元素具有相同的样式。

Note, however, that your example has nothing to do with inheritance. Just rule-sets that apply directly to the elements you are interested in. Inheritance is when an element takes on the same style as its parent via the inherit keyword.

span {
    color: inherit;
}

getComputedStyle将提供最终的计算值，

getComputedStyle will give the final computed value though, so it will pick up inherited values too.

这篇关于通过Javascript继承CSS值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！