通过Javascript继承CSS值

在我的页面上，我正在通过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>

测试表
这是一个测试/

12345

---

如果我查看元素“document.getElementById（objname.style.display””是否为空？如何通过javascript读取显示值？

您需要查看您想要使用的计算样式

.style

属性是一种访问和设置内联样式的方法（例如，与“样式”属性类似）

但是，请注意，您的示例与继承无关。只是直接应用于您感兴趣的元素的规则集。继承是指元素通过

inherit

关键字采用与其父元素相同的样式

span {
    color: inherit;
}

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

您的第二个CSS规则：

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

将匹配id为“FilterBox”的任何对象，该对象是类为“Sliding”的任何对象的后代，因此此规则不适用于您的div

并获得计算风格，您可以参考Fabien的答案，或者考虑使用jQuery，这使得这件事情变得容易得多：

---

使用jQuery，$（“#FilterBox”）.css（“display”）将返回“display”的当前值。

当然可以，但您可以向他指出一百万次计算样式，但是如果css不正确，这是浪费时间，因为第二条规则不涉及display属性，如果将其应用于该元素，则不会产生任何影响。getComputedStyle（）不适用于所有流行浏览器（不命名任何浏览器），您现在可以安全地使用

getComputedStyle

相关：谢谢大家。使用getComputedStyle有助于解决我的问题。我认为getElementById（）.style只用于单独的样式设置，而不是由类或id设置的样式。

if (!window.getComputedStyle) 
{
    window.getComputedStyle = function(el, pseudo) 
    {
        this.el = el;
        this.getPropertyValue = function(prop) {

        var re = /(\-([a-z]){1})/g;
        if (prop == 'float') 
            prop = 'styleFloat';
        if (re.test(prop)) 
        {
            prop = prop.replace(re, function () {

            return arguments[2].toUpperCase();
           });
        }

        return el.currentStyle[prop] ? el.currentStyle[prop] : null;
      }

      return this;
   }
}

function GetCompStyle()
{   
    var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), "");
    alert(compStyle.getPropertyValue("display"));   
}