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编写的那样，把它放在一个变体中：

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

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

2 个答案: