Question

我想在某个div中找到所有的类和ID！和这些css属性！

示例：

<div class="demo">
<div class="new_class">
<p id="para">This is Demo Paragraph</p>
<a style="background:#ccc">HyperLink</a>

</div>
</div>

<style>
.demo{

height:100px; width:100px; background:#FF0;

}
.new_class{height:40px; width:40px; background:#999;}
#para{color:#E1E1E1;}


</style>

现在的问题是：我想找到在demo类中使用的所有类和id！和他们的css值（现在应用哪种风格）。我想找到如下结果：

<style>
.demo{

height:100px; width:100px; background:#FF0;

}
.new_class{height:40px; width:40px; background:#999;}
#para{color:#E1E1E1;}
a{background:#ccc;}

</style>

Answer 1

OP，不确定你的目的是什么，但总的来说，这可能很有用。我有一个项目，我需要将一个奇特的模板从一个站点嵌入到不同站点上的页面上，这个页面具有非常不同且相互冲突的样式表。我使用了一些类似于以下内容的代码从原始内容中获取每个应用的样式，通过document.styleSheets，然后将它们全部重新应用为内联样式，这样我就可以将它放到“父”网站上而不会使样式表发生冲突。

<强> Fiddle

<强> JS

var selector,rule;
var result=[];
   var sheets = document.styleSheets;
    for (var i in sheets) {
        //rules or cssRules, depending on the browser
        var rules = sheets[i].rules || sheets[i].cssRules;
        //iterate over every css rule in the document
        for (var r in rules)
        {
            selector=rules[r].selectorText;
            rule=rules[r].cssText;
            //select demo itself, as well as all of its children
            $('.demo, .demo *').each(function () {
                //console.log($(this),selector);
                //for each element, see if it matches the current rule. add if it does
                if ($(this).is(selector))
                {
                    result.push(rule);                  
                }
            });
        }
    }
console.log(result);
//result[0] .demo { height: 100px; width: 100px; background: none repeat scroll 0% 0% rgb(255, 255, 0); }
//result[1] .new_class { height: 40px; width: 40px; background: none repeat scroll 0% 0% rgb(153, 153, 153); }
//result[2]  #para { color: rgb(225, 225, 225); }

当然，你必须自己调整一下这样做，删除重复的样式，如果你要将它应用于更大的HTML块，以及处理内联样式（这不会尝试）要做，但你可以从style属性中获取它们并从那里开始......），以及可能用getComputedStyle得到的计算样式，如@ Derek的回答所示。但这应该让你开始。

Answer 2

要查找所有现有id，请尝试：

var ids = [];
$(".demo *").each(function(){ this.id && ids.push(this.id); });
console.log(ids);

为class或其他任何事情做同样的事情。

但是，要获得预期的输出，必须首先为每个元素获取已定义的CSS样式。哪一个应该包括在内？默认情况下，p会获得边距和填充。你也包括那些吗？您还需要深入了解所有CSS声明，以找到应用的样式，这几乎是不可能的。

例如，

<div class="yellow"></div>
<style>
    div.yellow:not(.blue){
        background: yellow;
    }
</style>

如何获得<div>代码的背景？ .style.background？不，它返回""。那么现在你必须使用document.styleSheets进入CSS声明以查看应用了哪一个。你如何检查规则div.yellow:not(.blue)是否与你的元素匹配？祝你好运。（可能有库可以执行此类操作，或者您甚至可以使用jQuery的内部选择器引擎.is，尽管它与CSS中的不同。）您可以做的另一件事是试试getComputedStyle。它为您提供了每个单独的计算样式，即使在您的声明中也是如此。那么你想要做什么是不可能的。（我甚至不知道你在做什么这样的事情。）

如何在某个div中找到所有css类及其css属性？

2 个答案: