Valori CSS ereditati tramite JavaScript

Question

Sulla mia pagina Sto cambiando alcuni stili CSS tramite JavaScript. Quando provo e tiro di un valore che è stato ereditato - si tratta up vuoto. Si consideri il seguente:

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

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

E il codice html:

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

Se guardo l'elemento ' document.getElementById (objname) .style.display ' il suo vuoto? Come posso leggere il valore del display via via javascript?

Answer 1

Ti consigliamo di utilizzare getComputedStyle .

La struttura .style è un mezzo di accesso e impostazione di stile in linea (cioè come l'attributo stile).

Si noti, tuttavia, che il vostro esempio non ha nulla a che fare con l'ereditarietà. Basta set di regole che si applicano direttamente agli elementi che vi interessano. L'ereditarietà è quando un elemento assume lo stesso stile come il suo genitore tramite la parola chiave inherit.

span {
    color: inherit;
}

getComputedStyle darà il valore calcolato finale però, quindi si riprenderà valori ereditati troppo.

Answer 2

La seconda regola CSS:

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

corrisponderà nulla con id "FilterBox" che è un discendente di qualsiasi cosa con una classe "scorrevole", quindi questa regola non si applica al vostro div.

E per ottenere lo stile calcolato, è possibile fare riferimento alla risposta di Fabien, o considerare l'utilizzo di jQuery, il che rende questo materiale molto più facile:

utilizzando jQuery, $ ( "# FilterBox"). Css ( "visualizzazione") restituirebbe il valore corrente di "display".

Answer 3

È necessario guardare lo stile calcolato, vedi qui

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