インラインCSS抽出

Question

javascriptまたはjqueryのいずれかのテキスト "Hello World"に適用されたスタイルを抽出します。

と仮定は、例えば、これは私がよりスマートな方法はJavaScriptやjQueryのいずれかによって、「Hello World」の上で適用されたすべてのスタイルを抽出したいスタイルが「Hello World」の

<div id="root" style="text-align: right;"> 
<span style="font-weight: bold; text-decoration: underline;">Hello World</span> 
</div> 

に適用されるhtmlです。 出力はすべてのスタイルでなければなりません。text-align：right; font-weight：bold;テキスト装飾：下線;

どうすればいいですか？誰かに教えてください。

よろしく

-------------更新----------------------

感謝あなたの貴重なコメントのためにすべてあなた。しかし、まだ私は解決策を得ていません。もう一度コードを使って問題文を明確にしたいと思います。

静的HTML：

<div id="contentplaceholder"> 
</div> 

ドラッグ後

とプレースホルダ動的HTMLSでウィジェットを削除が生成されます。

動的に生成されたHTML：

<div id="contentplaceholder"> 

<div style="height: 0px; width: 0px; position: absolute; z-index: 0; left: 0pt; top: 0pt;" title="textWidget" id="contTextarea1329455914127"> 
<div style="border: 1px dotted rgb(102, 102, 102); height: 150px; width: 300px; float: left; overflow: hidden; left: 561.033px; top: 166.5px; position: relative; display: block;" id="Textarea1329455914127" class="ui-draggable ui-resizable"> 

<div class="ui-resizable-handle ui-resizable-e"></div> 
<div class="ui-resizable-handle ui-resizable-s"></div> 
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div> 

</div> 
</div> 

今、我々はドロップエリアでのHello Worldのような任意のテキストを書くことができますし、提供するウィジェットのツールバーを使用してスタイルを適用することができます。

今、最終的なHTMLは次のようになります。今

<div id="contentplaceholder"> 

    <div style="height: 0px; width: 0px; position: absolute; z-index: 0; left: 0pt; top: 0pt;" title="textWidget" id="contTextarea1329455914127"> 
    <div style="border: 1px dotted rgb(102, 102, 102); height: 150px; width: 300px; float: left; overflow: hidden; left: 561.033px; top: 166.5px; position: relative; display: block;" id="Textarea1329455914127" class="ui-draggable ui-resizable"> 

<!-- Dynamically applied inline css on Hello World and need to extract style only for this area--> 
<!-- Start --> 
<div style="text-align: right;"> 
<span style="font-weight: bold; text-decoration: underline;">HELLO WORLD</span> 
<br> 
</div> 
<!-- End --> 
<div class="ui-resizable-handle ui-resizable-e"></div> 
<div class="ui-resizable-handle ui-resizable-s"></div> 
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div> 

</div> 
</div> 

、私は唯一の "Hello World" に適用されるスタイルを抽出したいです。 ここではルートdivだけが固定されており、idを持つすべての子divは動的に生成され、固定されていません。title = titleのようになっています

このタスクを実行するには、

よろしく

Answer 1

チェックアウトhttp://forum.jquery.com/topic/css-with-no-arguments-should-return-a-object-of-style-attributes

Answer 2

$（ '＃1のContentPlaceHolderスパン'）。最初の（）。ATTR（ 'スタイル'）は全額スタイルのテキストを返します。

私はあなたがidを参照してタグを参照することをお勧めします。取得したいのはstyle属性のテキストコンテンツだけです。

Answer 3

アイブ氏は、CSSファイルとインラインの両方からスタイルを取得します....この数回使用して仕事をしていません：

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($("#element"));