getComputedStyle (or) $.css(map) <-- 获取每个样式声明答案

【问题标题】：getComputedStyle (or) $.css(map) <-- to get every style declarationgetComputedStyle (or) $.css(map) <-- 获取每个样式声明
【发布时间】：2010-04-01 06:01:37
【问题描述】：

除了遍历声明了每个样式属性的数组之外，还有什么方法可以获取 dom 元素的所有样式的键/值输出？

我的后备方案是遍历列出的键： http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

有什么方法可以得到一个 dom 元素所有样式的键/值输出？

是的，但不要期望值（单位等）的精确处理是相同的跨浏览器。

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

【讨论】：

【解决方案2】：

对于那些追问我同样问题的人，手动方式的工作方式如下：

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

【讨论】：