使用JavaScript输出CSS标记到一个字符串

我想知道是否有人曾经尝试输出使用javascript给定元素的css标记。使用JavaScript输出CSS标记到一个字符串

注意：仅使用Webkit。

例如：

HTML：

<div id="css"></div>

造型：

#css { 
    background: #F1F3F5; 
    border: 1px solid #B4BFC9; 

    -moz-box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
    box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
}

漂亮的jQuery插件？ :)

alert($('#css').getCSS());

警报

#css { 
    background: #F1F3F5; 
    border: 1px solid #B4BFC9; 

    -moz-box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
    box-shadow: 0px 1px rgba(0, 0, 0, 0.3); 
}

来源

2011-07-08 Ryan

可能重复[你怎么看用JavaScript CSS规则值？（HTTP：/ /stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript） –

我从来没有想过它，但它会很酷。不确定Safari，Chrome和Firefox都有检测工具会让你获得更多信息时，为什么你需要它。 – brenjt

由于不支持的规则被忽略，无法同时获得'-moz-'值和'-webkit'值。 – qwertymk

function css(a){ 
    var sheets = document.styleSheets, o = {}; 
    for(var i in sheets) { 
     var rules = sheets[i].rules || sheets[i].cssRules; 
     for(var r in rules) { 
      if(a.is(rules[r].selectorText)) { 
       o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style'))); 
      } 
     } 
    } 
    return o; 
} 

function css2json(css){ 
     var s = {}; 
     if(!css) return s; 
     if(css instanceof CSSStyleDeclaration) { 
      for(var i in css) { 
       if((css[i]).toLowerCase) { 
        s[(css[i]).toLowerCase()] = (css[css[i]]); 
       } 
      } 
     } else if(typeof css == "string") { 
      css = css.split("; ");   
      for (var i in css) { 
       var l = css[i].split(": "); 
       s[l[0].toLowerCase()] = (l[1]); 
      }; 
     } 
     return s; 
    }

用法：

var style = css($("#elementToGetAllCSS")); 
$("#elementToPutStyleInto").css(style);

的

来源

2011-07-08 17:46:34 AlienWebguy

很好。谢谢AlienWebguy :) – Ryan

但是，这只能针对每个浏览器单独运行，因为它们会针对无法识别的属性进行过滤 - 正如@qwertymk所述。 – Ryan

如果元素也具有伪类，例如':: afetr'，':: before'和'：over'并显示它们，你能否使它工作？那将是最棒的！ – vsync

使用JavaScript输出CSS标记到一个字符串

回答

相关问题