[英]How can I separate the HTML Elements and the CSS elements and return them?
This is a JS fiddle of one part I want to achieve. 这是我要实现的一部分的JS小提琴。
alert($("#content")[0].outerHTML);
This returns the DOM structure like: 这将返回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>
I will be adding the div
s dynamically and the CSS will be inline
. 我将动态添加div
,CSS将inline
。 Ideally, I want to be able to take the CSS out so I can return both the div
elements and then the CSS attributes separately as text elements. 理想情况下,我希望能够取出CSS,以便可以分别返回div
元素和CSS属性作为文本元素。
You can remove style attributes and store them in some id-style map, so you can use them later if you need. 您可以删除样式属性并将其存储在某些id样式映射中,因此以后可以根据需要使用它们。 Something like this: 像这样:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.