Valores de CSS heredados a través de Javascript

Question

En mi página, estoy cambiando algunos estilos de CSS a través de JavaScript. Cuando intento y obtengo un valor que ha sido heredado, aparece en blanco. Considere lo siguiente:

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

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

Y el html:

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

Si miro el elemento 'document.getElementById (objname) .style.display' su blanco? ¿Cómo puedo leer el valor de visualización a través de javascript?

Answer 1

Usted querrá utilizar getComputedStyle.

La propiedad .style es un medio de acceso y configuración de estilo en línea (es decir, como el atributo de estilo).

Tenga en cuenta, sin embargo, que su ejemplo no tiene nada que ver con la herencia. Solo conjuntos de reglas que se aplican directamente a los elementos que le interesan. La herencia se produce cuando un elemento adopta el mismo estilo que su elemento primario a través de la palabra clave inherit.

span { 
    color: inherit; 
} 

getComputedStyle dará el valor calculado definitiva, sin embargo, por lo que va a recoger los valores heredados también.

Answer 2

Es necesario buscar en el estilo computarizada, see here

Answer 3

Su segunda regla CSS:

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

coincidirá con cualquier cosa con id "FilterBox" que es un descendiente de cualquier cosa con una clase "deslizante", por lo que esta regla no se aplica a su div.

Y para conseguir el estilo computarizada, puede hacer referencia a la respuesta de Fabien, o considerar el uso de jQuery, lo que hace que este material sea mucho más fácil:.

usando jQuery, $ ("# FilterBox") CSS (" display ") devolverá el valor actual para" mostrar ".

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