Obtiene el valor de propiedad del elemento CSS (ancho/alto) tal como se configuró (en porcentaje/em/px/etc)

Question

¿Cómo se puede obtener una propiedad CSS de elementos (por ejemplo, ancho/alto) tal como se estableció con reglas CSS? en cualquier unidad que se haya configurado (por ejemplo, por ciento/em/px)? (En Google Chrome, preferiblemente sin marcos).

El uso de getComputedStyle devuelve el valor actual en píxeles, igual que css() en jQuery.

Por ejemplo:

<div class="b">first</div> 
<div id="a" class="a">second</div> 

<style> 
    div  { width: 100px; } 
    x, div#a { width: 50%; } 
    .a  { width: 75%; } 
</style> 

Mientras iterar todos div elementos en este ejemplo, me gustaría ser capaz de obtener la segunda div s ancho que 50% (y el primero como 100px).

---

El inspector de elementos de Chrome puede mostrar el valor de la propiedad de CSS tal como se configuraron, por lo que debería ser posible en Chrome.

---

No es un duplicado exacto de la cuestión vinculada, ya que la respuesta aceptada hay un truco simple que produce un ancho porcentaje no importa qué tipo de ancho se establece. Y para el resto, ¿tiene que saber el selector utilizado para hacer la regla activa? ¿Cómo lo sabría uno?

Answer 1

¡Buenas noticias a todos! Parece que hay un CSS Typed OM en su camino en los borradores w3.

Al leer rápidamente este documento, parece que el objetivo de esta es la especificación de, para facilitar el acceso de los valores de CSSOM desde javascript.

La parte realmente importante de esto para nosotros aquí es que vamos a tener una API CSSUnitValue, que será capaz de analizar los valores CSS a un objeto de forma

{ 
    value: 100, 
    unit: "percent", // | "px" | "em" ... 
    type: "percent" // | "length" 
} 

y un método Window.getComputedStyleMap(), desde de lo cual podremos obtener los valores realmente aplicados en nuestros elementos.

A partir de hoy, parece que sólo Chrome se ha iniciado la implementación de él sin embargo, y hay que cambiar en la plataforma Web Experimental características bandera en about:flags ...

(() => { 
 
    if (!window.getComputedStyleMap && !Element.prototype.computedStyleMap) { 
 
    console.error("Your browser doesn't support CSS Typed OM"); 
 
    return; 
 
    } 
 
    document.querySelectorAll('.test') 
 
    .forEach((elem) => { 
 
     let styleMap; 
 
     // As defined in specs' drafts 
 
     if (window.getComputedStyleMap) { 
 
     styleMap = window.getComputedStyleMap(elem); 
 
     } 
 
     // Currently Chrome attaches it to the Element proto 
 
     else styleMap = elem.computedStyleMap(); 
 

 
     const widthValue = styleMap.get('width'); 
 
     console.log(elem, widthValue); 
 
    }); 
 

 
/* outputs 
 

 
    <div class="b test">first</div> 
 
    CSSUnitValue { 
 
    "type": "length", 
 
    "unit": "px", 
 
    "value": 100, 
 
    [__proto__] 
 
    } 
 
    
 
    <div id="a" class="a test">second</div> 
 
    CSSUnitValue { 
 
    "type": "percent", 
 
    "unit": "percent", 
 
    "value": 50, 
 
    [__proto__] 
 
    } 
 

 
*/ 
 

 
})();

div.test { width: 100px; } 
 
x,div#a { width: 50%; } 
 
.a { width: 75%; }

<div class="b test">first</div> 
 
<div id="a" class="a test">second</div>

Answer 2

Al parecer no hay ninguna API DOM para este

https://developer.mozilla.org/en/DOM/window.getComputedStyle#Notes

EDIT: Vaya, acabo de dar cuenta esto fue marcada para Google Chrome

window.getMatchedCSSRules Pruebe()

Answer 3

no es tan tan simple como llamar a WebKits getMatchedCSSRules(), devuelve las reglas coincidentes por orden de prioridad (aunque no he visto ninguna mención de esta orden en los documentos), pero el orden no toma en cuenta la importancia de la propiedad. tant prioridad y no incluye estilos de elemento. Así que terminé con esta función:

getMatchedStyle

function getMatchedStyle(elem, property){ 
    // element property has highest priority 
    var val = elem.style.getPropertyValue(property); 

    // if it's important, we are done 
    if(elem.style.getPropertyPriority(property)) 
     return val; 

    // get matched rules 
    var rules = getMatchedCSSRules(elem); 

    // iterate the rules backwards 
    // rules are ordered by priority, highest last 
    for(var i = rules.length; i --> 0;){ 
     var r = rules[i]; 

     var important = r.style.getPropertyPriority(property); 

     // if set, only reset if important 
     if(val == null || important){ 
      val = r.style.getPropertyValue(property); 

      // done if important 
      if(important) 
       break; 
     } 
    } 

    return val; 
} 

Ejemplo

Teniendo en cuenta las siguientes reglas del código y de estilo:

<div class="b">div 1</div> 
<div id="a" class="a d2">div 2</div> 
<div id="b" class="b d3" style="width: 333px;">div 3</div> 
<div id="c" class="c d4" style="width: 44em;">div 4</div> 

<style> 
div  { width: 100px; } 
.d3  { width: auto !important; } 
div#b { width: 80%; } 
div#c.c { width: 444px; } 
x, div.a { width: 50%; } 
.a  { width: 75%; } 
</style> 

este JS código

var d = document.querySelectorAll('div'); 

for(var i = 0; i < d.length; ++i){ 
    console.log("div " + (i+1) + ": " + getMatchedStyle(d[i], 'width')); 
} 

da los siguientes anchos de las div s:

div 1: 100px 
div 2: 50% 
div 3: auto 
div 4: 44em 

(At jsFiddle)

Answer 4

Hay una entrada duplicada nueva con una gran respuesta here. Esa respuesta fue para jQuery, pero es fácil de implementar in pure js.

function getDefaultStyle(element, prop) { 
    var parent = element.parentNode, 
     computedStyle = getComputedStyle(element), 
     value; 
    parent.style.display = 'none'; 
    value = computedStyle.getPropertyValue(prop); 
    parent.style.removeProperty('display'); 
    return value; 
}