Javascript Girl
  1. Javascript Girl
  3. GetComputedStyle (ou) $ .css (map) <- pour obtenir chaque déclaration de style
Intereting Posts
Implémentation d'un dessin et d'un dessin lisses sur l'élément <canvas> Comment cliquer sur l'élément caché dans le rapporteur? Regex pour numéro avec décimales et mille séparateurs Où est angular2-polyfills maintenant que non-bêta Angulaire 2 est emballé comme @angle? Temporisation de cookie Javascript avec temporisateur de compte à rebours Javascript getElement par href? Comment écouter "Arrêter le partage" cliquez sur Chrome DesktopCapture API Existe-t-il un moyen de modifier les paramètres d'impression du navigateur par Javascript ou CSS Extension chrome – meilleure méthode de réduction du temps de chargement lors de l'utilisation de scripts de contenu Obtenez SVG à partir d'un élément de toile et enregistrez-le Comment obtenir Webcontent qui est chargé par JavaScript en utilisant CURL? Insérez un élément div comme parent La fenêtre de connexion de Facebook apparaît et disparaît très rapidement Comment faire défiler vers le bas avec Phantomjs pour charger du contenu dynamique Comment puis-je obtenir le mot que le caret est sur l'intérieur d'une div contentative?

GetComputedStyle (ou) $ .css (map) <- pour obtenir chaque déclaration de style

Mis à part la mise en boucle d'un tableau qui a chaque propriété de style déclarée, est-il possible d'obtenir une sortie clé / valeur de tous les styles d'un élément dom?

Mon retour est itérant à travers les clés listées sur: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

Existe-t-il un moyen d'obtenir une sortie clé / valeur de tous les styles d'un élément dom?

Oui, mais ne vous attendez pas à ce que la manipulation exacte des valeurs (unités, etc.) soit le même navigateur croisé. 

var styles= []; // The DOM Level 2 CSS way // if ('getComputedStyle' in window) { var cs= getComputedStyle(element, ''); if (cs.length!==0) for (var i= 0; i<cs.length; i++) styles.push([cs.item(i), cs.getPropertyValue(cs.item(i))]); // Opera workaround. Opera doesn't support `item`/`length` // on CSSStyleDeclaration. // else for (var k in cs) if (cs.hasOwnProperty(k)) styles.push([k, cs[k]]); // The IE way // } else if ('currentStyle' in element) { var cs= element.currentStyle; for (var k in cs) styles.push([k, cs[k]]); }

Pour ceux qui viennent après moi avec la même question, la manière manuelle fonctionne comme ceci: 

  // Now, here's a list of styles we want to check: var allStyles = ["azimuth","background","backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","bottom","captionSide","clear","clip","color","content","counterIncrement","counterReset","cssFloat","cue","cueAfter","cueBefore","cursor","direction","display","elevation","emptyCells","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","markerOffset","marks","maxHeight","maxWidth","minHeight","minWidth","orphans","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","pause","pauseAfter","pauseBefore","pitch","pitchRange","playDuring","position","quotes","richness","right","size","speak","speakHeader","speakNumeral","speakPunctuation","speechRate","stress","tableLayout","textAlign","textDecoration","textIndent","textShadow","textTransform","top","unicodeBidi","verticalAlign","visibility","voiceFamily","volume","whiteSpace","widows","width","wordSpacing","zIndex"]; // var allStyles = ["float"]; var setStyles = []; // Now we loop through each property, and report those defined $.each(allStyles, function(key, value){ if ($this.css(value) !== undefined){ setStyles.push(value, $this.css(value)) } }); alert(setStyles.join(" <br /> "));