jQuery-从div中的所有内容获取CSS

Question

假设我有一些这样的html代码

<html>
<body>
    <div class="container">
    <div class="markup-container">
        <div class="title">This is a title with some markup</div>
        <div class="body">This is the body with some markup and it's longer ^^</div>
    </div>
    </div>
</body>
</html>

和我的CSS看起来像这样

.container{display:none;}
.markup-container{color:#404040;}
.title{text:decoration:underline;}
.body{color:#000;}

如何获取我的JavaScript来读取类容器（包括子级）中使用的所有CSS。

我希望它显示它，就像用css编写它一样，并把它放在一个variabel中，例如：

var css = "<style type="text/css">.container{display:none;}.markup-container{color:#404040;}.title{text:decoration:underline;}.body{color:#000;}"

我该怎么办？

Answer 1

使用纯JavaScript，您可以执行以下操作：

var styleSheet = document.styleSheets[0]; //first stylesheet.
var css='<style type="text/css">';
for(i=0; i<styleSheet.cssRules.length; i++)
 {
    css += styleSheet.cssRules[i].cssText;
 }
css = css + "</style>";

Answer 2

当您使用jQuery的css方法时，您将以一种易于将其应用于其他元素的方式存储CSS。 获取多个选择器的CSS并将其存储在一个变量中将特别耗时，通常不切实际且不寻常。

您可以使用jquery检索单个选择器的单个CSS属性，如下所示：

var css = $('.container').css('display');

将CSS存储为字符串的最简单方法是将CSS与HTML放在同一位置（即不在单独的CSS文件中）。 您可以通过向其添加ID来将css存储为字符串，如下所示：

<style id="my_css" type="text/css">
    .container{display:none;}
    .markup-container{color:#404040;}
    .title{text:decoration:underline;}
    .body{color:#000;}
</style>

然后将该文本存储在您的javascript中，

var css = $('#my_css').text();

我在这里有一个实际的例子-http://jsbin.com/umire3