1つのオブジェクトから別のオブジェクトにすべてのユーザー提供スタイルをコピーする方法

Question

質問があったhere CSSのスタイルをオブジェクト間でコピーする方法について質問しました。一般的に受け入れられる回答は、

var p = document.getElementById("your_p_id"); 
var div = document.createElement("div"); 
div.innerHTML = "your div content"; 
div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText; 

ですが、私の状況は少し異なります。 selectタグを想定するspanというスクリプトを作成してから、selectを非表示にします。これにより、spanのスタイルをより簡単に行うことができるので、CSSのスタイリングが容易になります。これは、忠実なselectタグと比較して簡単です。

cssTextを使用すると、選択範囲から適用されたスタイルを範囲にコピーすると、選択タグのようになります。すべての組み込みスタイルはユーザーの入力だけでなく、スパンにも適用されるため、最初にspanタグを持つという目的に打ち勝つために、これらのcssプロパティすべてを数十回オーバーライドする必要があります。

要素をスタイルするために使用したスタイルシート全体ではなく、ユーザー提供のスタイルのみをコピーする方法はありますか？ 。

はこれまで、私がまたがるように選択からclassとidを転送することにより適用されるスタイルを転送することができる持っているが、私の挑戦は、直接selectタグ（すなわちに適用されるスタイルを取得しているスタイル/スタイルシートでは、それが読み取ります。 select { blah : bloh;}）

Answer 1

このような何か試してみてください：

ApplyStyles("#selection", "#span"); 

：そして、このような関数を使用し

function ApplyStyles(select, span) { 
    var select = document.querySelector(select); 
    var span = document.querySelector(span); 
    var sheets = document.styleSheets; 

    for(var i = 0; i < sheets.length; i++) { 
     var rules = sheets[i].cssRules || sheets[i].rules; 
     for(var r = 0; r < rules.length; r++) { 
      var rule = rules[r]; 
      var selectorText = rule.selectorText; 
      if(document.querySelector(selectorText) == select){ 
     for(var l = 0; l < rule.style.length; l++){ 
      span.style[rule.style[l]] = rule.style[rule.style[l]]; 
     } 
      } 
     } 
    } 
} 

を

は、ここでは例えばJSFiddleです：この仕組みhttps://jsfiddle.net/rsLnaw56/2/

はそれがselect要素に適用されているすべての外部のスタイルを見つけているとspan要素に適用します。