內嵌CSS提取

Question

我想提取在javascript或jquery中應用於文本「Hello World」的樣式。

假設，例如，這是在風格上的「Hello World」應用HTML

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

我想更聰明的方式來提取應用的「Hello World」的所有風格無論是在JavaScript或jQuery的。 輸出應該是所有樣式，即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」 的風格。 這裏只有root div是固定的，並且所有具有id的小孩div都是動態生成的並且不是固定的，只有標題是我變得像title =「textWidget」

請提供幫助來完成此任務。

問候

Answer 1

退房http://forum.jquery.com/topic/css-with-no-arguments-should-return-a-object-of-style-attributes

Answer 2

$（ '＃的ContentPlaceHolder跨度'）。第一個（）。ATTR（ '風格'）將全部返回樣式的文本。

我建議你用id來代表span，並使用它來引用標籤，並且只有當你想獲得的是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"));