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

Question

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

JS小提琴

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样式映射中，因此以后可以根据需要使用它们。 像这样：

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

 <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>