Valores CSS herdadas via JavaScript

Question

Na minha página eu estou mudando alguns estilos css via JavaScript. Quando eu tentar puxar um valor que foi herdada - ele vem para cima em branco. Considere o seguinte:

    .Sliding
    {
        display: none;
        overflow: hidden;
    }

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

E o html:

<div class="Sliding" id="FilterBox">
        <h3>Test Form</h3>
        This is a test/<br />
        12345
</div>

Se eu olhar para o elemento ' document.getElementById (objname) .style.display ' sua em branco? Como posso ler o valor de exibição via via javascript?

Answer 1

Você vai querer usar getComputedStyle .

A propriedade .style é um meio de acesso e configuração de estilo inline (ou seja, como o atributo de estilo).

Note, no entanto, que o seu exemplo não tem nada a ver com a herança. Apenas conjuntos de regras que se aplicam diretamente para os elementos que você está interessado. A herança é quando um elemento assume o mesmo estilo como seu pai via a palavra-chave inherit.

span {
    color: inherit;
}

getComputedStyle dará o valor calculado final, embora, por isso vai pegar valores herdados também.

Answer 2

Sua segunda regra CSS:

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

irá corresponder a qualquer coisa com id "FilterBox" que é um descendente de qualquer coisa com uma classe "Deslizando", pelo que esta regra não se aplica à sua div.

E para obter o estilo computadorizada, pode referir-se a resposta de Fabien, ou considerar o uso de jQuery, o que torna este material muito mais fácil:

usando jQuery, $ ( "# FilterBox"). Css ( "display") retornaria o valor atual para "display".

Answer 3

Você precisa olhar para o estilo computadorizada, ver aqui

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