Javascriptを使って文字列にCSSマークアップを出力する

Question

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

Answer 1

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

使用法：[？あなたはどのようにJavaScriptでCSSルール値を読みます]の

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