etc)

Comment peut-on obtenir une propriété CSS d'éléments (par exemple largeur / hauteur) telle qu'elle a été définie avec les règles CSS, dans les unités qu'il a été configurées (par exemple, pourcentage / em / px)? (Google Chrome, de préférence sans cadre).

L'utilisation de getComputedStyle renvoie la valeur actuelle en pixels, de même css() dans jQuery.

Par exemple:

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

Pendant l'itération de tous les éléments div dans cet exemple, j'aimerais pouvoir obtenir la seconde largeur des 100px comme 50% (et la première en 100px ).

L'inspecteur d'éléments Chrome peut afficher la valeur de la propriété CSS telle qu'elle a été configurée, ce qui devrait être possible sur Chrome.

L'inspecteur d'éléments Chrome affiche la valeur de la propriété tel qu'il a été configuré

Pas une duplication exacte de la question liée, car il y a une réponse acceptée, il existe un hack simple qui produit un pourcentage de largeur quel que soit le type de largeur définie. Et pour le reste, vous devez connaître le sélecteur utilisé pour créer la règle active? Comment saurons-nous cela?

Ce n'est pas aussi simple que d'appeler WebKits getMatchedCSSRules() , il renvoie les règles correspondantes par ordre de priorité (tout comme je n'ai pas mentionné cet ordre dans les documents), mais l'ordre ne tient pas compte de la priorité importante de la propriété et N'inclut pas les styles d'élément. J'ai donc fini avec cette fonction:

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

Exemple

Compte tenu des règles de style et de style suivantes:

 <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#cc { width: 444px; } x, div.a { width: 50%; } .a { width: 75%; } </style>

Ce code JS

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

Donne les largeurs suivantes pour les div s:

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

( À jsFiddle )

Apparemment il n'y a pas d'API DOM pour cela

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

EDIT: oops, juste réalisé que cela a été marqué pour Google Chrome

Essayez window.getMatchedCSSRules ()

Il y a une nouvelle publication en double avec une excellente réponse ici . La réponse si pour jQuery mais c'est facile à mettre en œuvre dans des js pur .

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