¿Cómo obtener el valor de estilo en cascada o determinar si se calculó el valor real?

Question

Necesito obtener un valor de estilo en cascada de un elemento (no el calculado), o para determinar si el valor real se calculó o no.

Por ejemplo, si tengo un elemento con la regla css width: 100%, quiero obtener el valor 100% y no el valor real de los píxeles, o simplemente para saber que se calculó el valor real.

Sé que puedo obtenerlo usando elem.currentStyle, y también encontré una forma en Chrome para encontrarlo usando document.defaultView.getMatchedCSSRules().

¿Alguien sabe una manera de conseguirlo en otros navegadores?

Answer 1

mejor ruta sería el uso de una biblioteca API navegador indepent como jQuery

$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use. 

Answer 2

// El argumento css en este ejemplo debe ser una cadena de estilo CSS, no es una cadena camelCase.

function deepCss(who, css, ps){ 
    var sty, dv= document.defaultView; 
    // IE8 and below 
    if(document.body.currentStyle){ 
     sty= css.replace(/\-([a-z])/g, function(a, b){ 
      return b.toUpperCase(); 
     }); 
     return who.currentStyle[sty]; 
    } 
    // everyone else 
    if(dv){ 
     dv= document.defaultView.getComputedStyle(who, ps); 
     return dv.getPropertyValue(css); 
    } 
    return ''; 
} 

deepCss (document.body, 'background-color')

Answer 3

En este momento no creo que hay una manera integrada para hacer eso en los navegadores que no sean IE: getComputedStyle siempre devolverá el valor utilizado para esas propiedades, como usted dijo.

Answer 4

¿Qué hay de calcular el valor usted mismo? ¿Consultar el ancho calculado del elemento deseado y el ancho calculado del elemento padre y luego hacer algunas operaciones matemáticas para obtener el valor porcentual? percentageValue = 100% * widthOfWanted/widthOfContainer