通过 Javascript 继承的 CSS 值答案

【问题标题】：Inherited CSS Values via Javascript通过 Javascript 继承的 CSS 值
【发布时间】：2009-07-23 06:31:59
【问题描述】：

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

【问题讨论】：

谢谢大家。使用 getComputedStyle 帮助解决了我的问题。我认为 getElementById().style 仅用于个人样式设置 - 而不是由类或 id 设置的那些。

标签： javascript css getelementbyid

【解决方案1】：

你会想要使用getComputedStyle。

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

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

span {
    color: inherit;
}

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

【讨论】：

getComputedStyle() 不适用于所有流行的浏览器（无需命名）
您现在可以安全地使用getComputedStyle caniuse.com/#feat=getcomputedstyle
相关：Why does getComputedStyle not return display:none for an element hidden by a parent?

【解决方案2】：

您的第二条 CSS 规则：

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

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

而要获得计算的样式，可以参考 Fabien 的回答，或者考虑使用 jQuery，这让这件事变得容易多了：

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

【讨论】：

当然，但是你可以将他指向计算样式一百万次，但如果 CSS 不正确，那就是浪费时间
由于第二条规则没有触及 display 属性，所以如果它被写入应用到那个元素上，它不会有任何影响。

【解决方案3】：

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

【讨论】：

【解决方案4】：

你需要看一下计算出来的样式，see here

【讨论】：

链接已损坏/无响应。考虑在答案中包含代码