内联css提取

Inline css extraction

本文关键字：提取 css 内联      更新时间：2023-09-26

我想提取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>

我想通过javascript或jquery中更智能的方式提取"Hello World"上应用的所有样式。输出应为text-align:right；font weight:bold；文本装饰：下划线

我该怎么做？请告诉任何人。

问候

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

感谢大家的宝贵意见。但我仍然没有得到解决方案。我再次想用代码来进一步澄清问题陈述。

静态html:

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

拖放小部件后，会生成动态html。

动态生成的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>

现在，我只想提取应用于"你好世界"的风格。这里只有根div是固定的，所有带id的子div都是动态生成的，而不是固定的，唯一的标题是我得到了相同的标题，比如title="textWidget"

请提供帮助来完成这项任务。

问候

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

我已经用过几次了，并完成了这项工作。。。。将从CSS文件和Inline:中获得样式

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

$（'#contentplaceholder span'）.first（）.attr（'style'）将完整返回样式文本。

我建议您标识跨度，并使用它来引用标记，只有当您只想获得style属性的文本内容时，才使用此方法。

相关文章：