¿Cómo puedo obtener el valor CSS heredado usando Javascript?

Question

Estoy tratando de obtener el valor de una propiedad de CSS heredada mediante Javascript. No he podido encontrar una respuesta completa.

Ejemplo CSS:

div { 
    width: 80%; 
} 

Ejemplo de marcado:

<div id="mydiv"> Some text </div> 

utilizando JavaScript (jQuery, o nativo), necesito para obtener el ancho de la element-- no en píxeles, pero el cadena "80%".

$('#mydiv').css('width'); // returns in px 
$('#mydiv')[0].style.width // empty string 
getComputedStyle($('#mydiv')[0]).width // returns in px 

La razón por la que necesito el valor como una cadena es porque necesito copiar el estilo a otro elemento. Si se declara como un porcentaje, el otro valor debe ser un porcentaje. Si se declara en px, el otro valor debe estar en px.

El truco real es que esta propiedad podría ser heredada, no declarada explícitamente en el elemento (como en mi ejemplo).

¿Alguien tiene alguna idea?

Answer 1

No hay manera de obtener el valor porcentual me temo. Usted puede intentar algo como esto:

var widthpx = getComputedStyle($('#mydiv')[0]).width; 
var parentWidth = $('#mydiv').parent().css('width') 

var width = (100 * parseFloat(widthpx)/parseFloat(parentWidth)) + '%'; 

Answer 2

obtener el offSetWidth del elemento, y el offsetWidth de su offsetParent, y calcular el porcentaje de los dos enteros.

Answer 3

Esto vincula un controlador de eventos a un elemento para el evento click y alerta el ancho relativo del elemento en comparación con su elemento principal.

​$('#mydiv').on('click', function() { 

    //element width divided by parent width times 100 to make a percentage 
    alert(Math.round($(this).width()/$(this).parent().width() * 100) + '%'); 
});​​​​​​​​​​ 

Aquí es una demostración: http://jsfiddle.net/X67p5/

Answer 4

Lo que están buscando es this quirksmode.org article. Propone la función

function getStyle(el, styleProp) { 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
} 

Aún así, debe leer ese artículo detenidamente. Los nombres de los styleProp s no son realmente de navegador cruzado, y verá cómo los diferentes navegadores manejan esto. Opera parece tener el mejor soporte para informar los valores correctos.