Inherited CSS Werte über Javascript

Question

Auf meiner Seite Ich ändere einige CSS-Stile über Javascript. Wenn ich versuche, und einen Wert ziehen, die vererbt wurde - es kommt leer. Betrachten Sie das folgende:

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

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

Und die html:

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

Wenn ich auf das Element aussehen ' document.getElementById (objname) .style.display ' seine leer? Wie kann ich den Anzeigewert über über Javascript lesen?

Answer 1

Sie werden verwenden möchten getComputedStyle .

Die .style Eigenschaft ist ein Mittel für den Zugriff auf und die Einstellung Inline-Stil (d.h. wie die Style-Attribut).

Beachten Sie jedoch, dass Ihr Beispiel nichts mit Vererbung zu tun hat. Regelsätze nur die direkt auf die Elemente anwenden Sie interessiert sind. Die Vererbung ist, wenn ein Element auf dem gleichen Stil wie seine Eltern über das inherit Schlüsselwort nimmt.

span {
    color: inherit;
}

getComputedStyle wird die endgültige berechnete Wert obwohl geben, so dass es auch geerbt Werte abholt.

Answer 2

Ihre zweite CSS-Regel:

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

wird alles mit der ID „FilterBox“ entspricht, die ein Nachkomme von irgendetwas mit einer Klasse ist „Sliding“, so dass diese Regel nicht auf Ihre div gilt.

Und den berechneten Stil zu erhalten, können Sie auf Fabien Antwort verweisen, oder prüfen, mit jQuery, die dieses Zeug viel einfacher macht:

mit jQuery, $ ( "# FilterBox"). Css ( "display") würde den aktuellen Wert für "Anzeige" zurückzukehren.

Answer 3

Sie müssen sich auf dem berechneten Stil sehen, sehen hier

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