getComputedStyle (or) $ .css (map) <- para obtener cada declaración de estilo

Question

Además de recorrer una matriz que tiene cada propiedad de estilo declarada, ¿hay alguna forma de obtener una clave/valor de salida de todos los estilos de una elemento dom?

Mi repliegue se iteración a través de las teclas que aparecen en: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

Answer 1

¿hay alguna forma de obtener una clave/valor de salida de todos los estilos de un elemento dom?

Sí, pero no espere que el manejo exacto de los valores (unidades, etc.) sea el mismo navegador cruzado.

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

Answer 2

Para aquellos que vienen detrás de mí con la misma pregunta, la forma manual funciona así:

  // 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 /> "));