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

Answer 2

你的第二个CSS规则：

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

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

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

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

Answer 3

您需要查看计算出的样式see here

Answer 4

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"));   
}

通过Javascript继承CSS值

4 个答案: