Inline css extract

Question

Я хочу извлечь стиль, применяемый к тексту «Hello World» в javascript или jquery.

Предположим, например, это HTML, в котором стиль применяется на «Hello World»

<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; text-decoration: подчеркивание;

Как это сделать? Пожалуйста, скажите кому-нибудь.

С уважением

------------- Обновлено ----------------------

Спасибо вы все за ваши ценные комментарии. Но все равно я не получаю решения. Я снова хочу, чтобы уточнить проблему с кодом.

Статический 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 фиксирован, и все дочерние 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 ('стиль') будет возвращать текст стиля в полном объеме.

Я бы предположил, что вы используете идентификатор span и используете его для ссылки на тег и используете этот метод только в том случае, если все, что вы хотите получить, это текстовое содержимое атрибута style.

Answer 3

Ive использовал это пару раз и делает работу .... получите стиль как из 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"));