如何分离HTML元素和CSS元素并返回它们？

Question

这是我想要实现的一个部分的JS小提琴。

JS Fiddle

alert($("#content")[0].outerHTML);

这将返回DOM结构，如：

 <div id="content">
     <div id="example1" style="width:100px height:100px background-color:red"></div>
     <div id="example2" style="width:50px height:50px background-color:blue"></div>
     <div id="example3" style="width:25px height:25px background-color:yellow"></div>
 </div>

我将动态添加div，CSS将为inline。理想情况下，我希望能够将CSS取出，这样我就可以将div元素和CSS属性分别作为文本元素返回。

Answer 1

您可以删除样式属性并将其存储在某个id样式的地图中，以便日后可以根据需要使用它们。像这样：

＆＃13;

＆＃13;

var styles = {};

$("#content").children().each(function() {
    styles[this.id] = $(this).attr('style');
    $(this).removeAttr('style');
});

// Check
alert(
    'HTML:\n\n' + 
    $("#content")[0].outerHTML + 
    '\n\nCSS:\n\n' + 
    JSON.stringify(styles, null, 4)
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
    <div id="example1" style="width:100px height:100px background-color:red"></div>
    <div id="example2" style="width:50px height:50px background-color:blue"></div>
    <div id="example3" style="width:25px height:25px background-color:yellow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;