10

在我的页面上，我正在通过 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 读取显示值？

4

4 回答 4

13

你会想要使用getComputedStyle。

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

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

span {
    color: inherit;
}

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

于 2009-07-23T06:34:45.110 回答
2

您的第二个 CSS 规则：

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

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

并且要获得计算的样式，您可以参考 Fabien 的答案，或者考虑使用 jQuery，这使得这些东西变得更容易：

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

于 2009-07-23T06:36:36.900 回答
1 
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"));   
}
于 2009-07-23T06:51:13.800 回答
0

您需要查看计算的样式，请参见此处

于 2009-07-23T06:34:04.160 回答