Otrzymaj wartość właściwości CSS (szerokość/wysokość) elementu zgodnie z ustawieniami (w procentach/em/px/etc)

Question

Jak można uzyskać właściwość CSS elementów (na przykład szerokość/wysokość), ponieważ została ona ustawiona za pomocą reguł CSS, w jakich jednostkach została ustawiona (np. procent/em/px)? (W Google Chrome, najlepiej bez ramek).

Użycie zwraca bieżącą wartość w pikselach, podobnie jak css() w jQuery.

Na przykład:

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

podczas iteracji wszystkie div elementy w tym przykładzie, chciałbym, aby móc dostać drugiego div s szerokość jak 50% (i pierwszy jako 100px).

---

Inspektor elementów Chrome może wyświetlać wartości właściwości CSS, ponieważ zostały ustawione, dlatego powinno być możliwe w Chrome.

---

Nie dokładną kopią połączonego pytanie, jak tam akceptowane odpowiedź jest prosta hack, który produkuje szerokość procentową bez względu na to jaką szerokość jest ustawiona. A do reszty trzeba znać selektor użyty do stworzenia aktywnej reguły? Skąd o tym wiesz?

Answer 1

Dobra wiadomość dla wszystkich! Wygląda na to, że w szkicach na W3 jest CSS Typed OM.

Szybkie czytanie tego dokumentu, wydaje się, że celem tej może być być specyfikacji, jest ułatwienie dostępu wartości CSSOM z javascript.

Naprawdę ważną częścią tego dla nas jest to, że będziemy mieć CSSUnitValue API, który będzie w stanie analizować wartości CSS do obiektu formularza

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

i sposobu Window.getComputedStyleMap(), z które będziemy w stanie uzyskać wartości faktycznie zastosowane na naszych elementach.

Na dzień dzisiejszy wydaje się nie tylko Chrome rozpoczęcie wdrażania go jednak, i trzeba włączyć Experimental Web Platform wyposażony flagi 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

Widocznie nie ma DOM API dla tego

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

EDIT: ups, tylko sobie z tego sprawę cechował dla Google Chrome

Zajrzyj window.getMatchedCSSRules()

Answer 3

To nie jest tak proste jak po prostu wywołanie WebKits getMatchedCSSRules(), zwraca dopasowane reguły w kolejności priorytetu (mimo że nie widziałem żadnej wzmianki o tym zamówieniu w dokumentach), ale kolejność nie bierze się pod uwagę mający priorytet i nie obejmuje stylów elementów. Więc skończyło się z tą funkcją:

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

Przykład

Biorąc pod uwagę następujące zasady kodów i styl:

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

ten JS kodu

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

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

daje następujące szerokości dla div s:

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

(At jsFiddle)

Answer 4

Jest to nowsza duplikat post z wielkim odpowiedź here. Ta odpowiedź była dla jQuery, ale jest łatwa do wdrożenia 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; 
}