Ottieni proprietà elemento CSS (larghezza/altezza) come era impostato (in percentuale/em/px/ecc.)

Question

Come si può ottenere una proprietà CSS di elementi (ad esempio larghezza/altezza) come era impostata con le regole CSS, in qualsiasi unità è stata impostata (ad es. percentuale/em/px)? (In Google Chrome, preferibilmente senza cornice).

L'utilizzo di getComputedStyle restituisce il valore corrente in pixel, così come css() in jQuery.

Ad esempio:

<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> 

Mentre l'iterazione tutti div elementi in questo esempio, mi piacerebbe essere in grado di ottenere il secondo div s larghezza 50% (e la prima come 100px).

---

Chrome elemento ispettore può visualizzare il valore della proprietà CSS come sono stati impostati, quindi dovrebbe essere possibile in Chrome.

---

Non un esatto duplicato della questione legata, in quanto non vi la risposta accettata v'è un semplice hack che produce una larghezza percentuale non importa che tipo di larghezza è impostata. E per il resto devi conoscere il selettore usato per rendere la regola attiva? Come lo saprebbe?

Answer 1

Buone notizie a tutti! Sembra che ci sia un CSS Typed OM che sta percorrendo le bozze di w3.

Leggendo velocemente questo documento, sembra che l'obiettivo di questa specifica possa essere, è facilitare l'accesso dei valori CSSOM da javascript.

La parte veramente importante di questo per noi qui è che avremo un API CSSUnitValue, che sarà in grado di analizzare i valori CSS a un oggetto della forma

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

E un metodo Window.getComputedStyleMap(), da che saremo in grado di ottenere i valori effettivamente applicati sui nostri elementi.

Ad oggi, sembra solo Chrome ha cominciato la sua attuazione, però, ed è necessario accendere il Web piattaforma sperimentale caratteristiche bandiera 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

Apparentemente non c'è API DOM per questo

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

EDIT: oops, appena realizzato questo è stato contrassegnato per Google Chrome

Prova window.getMatchedCSSRules()

Answer 3

non è così Semplice come semplicemente chiamando WebKits getMatchedCSSRules(), restituisce le regole corrispondenti in ordine di priorità (anche se non ho visto alcun riferimento a questo ordine nei documenti), ma l'ordine non tiene in considerazione la proprietà impor tantissima priorità e non include gli stili degli elementi. Così ho finito con questa funzione:

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

Esempio

Dati i seguenti regole di codice e di stile:

<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> 

questo JS codice

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

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

ha pronunciato la seguente larghezze per le div s:

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

(At jsFiddle)

Answer 4

C'è un post duplicato più recente con una grande risposta here. Quella risposta era per jQuery ma è facile implementare 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; 
}