Inherited CSS Werte über Javascript

Question

Auf meiner Seite ändere ich einige CSS-Stile über Javascript. Wenn ich versuche, einen vererbten Wert zu ziehen, wird er leer angezeigt. Beachten Sie Folgendes:

.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 an das Element suchen 'document.getElementById (objname) .style.display' seine leer? Wie kann ich den Anzeigewert via Javascript lesen?

Answer 1

Sie wollen getComputedStyle verwenden.

Die .style-Eigenschaft ist ein Mittel zum Zugreifen auf und Festlegen von Inline-Stil (d. H. Wie das Stilattribut).

Beachten Sie jedoch, dass Ihr Beispiel nichts mit Vererbung zu tun hat. Nur Regel-Sets, die direkt auf die Elemente angewendet werden, an denen Sie interessiert sind. Vererbung ist, wenn ein Element über das Schlüsselwort inherit den gleichen Stil wie sein Elternteil annimmt.

getComputedStyle wird jedoch den endgültigen berechneten Wert geben, so dass er auch vererbte Werte übernehmen wird.

Answer 2

Sie müssen sich auf dem berechneten Stil suchen, see here

Answer 3

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 die berechnete Art zu erhalten, die Sie Fabien Antwort verweisen können, oder prüfen, mit jQuery, die dieses Zeug viel einfacher macht.

mit jQuery, $ („# FilterBox“) css (“ Anzeige ") würde den aktuellen Wert für" Anzeige "zurückgeben.

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