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

标签 jquery html css

假设我有一些像这样的 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;}"

我该怎么做?

最佳答案

使用纯 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>";

关于jQuery - 从 div 中的所有内容获取 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3081239/

相关文章:

javascript - CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

javascript - 移动到下一行时将图像扩展到容器宽度

javascript - 在JQ中打印obj数组

jquery - 将jquery数据表数据转换为json

javascript - 如何访问被单击元素的父元素?

jquery - 如何停止我的 jquery 动画?

javascript - 数据表复选框没有获得值(value)

javascript - CodeMirror javascript 装订线行数字填充

javascript - 如何在浏览器中加载指向文件夹的静态html

jquery - 自定义带箭头滚动条,仅当文字高于<div/>高度时