CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Umesh
Umesh

Reputation: 193

How to find all css classes and its css attributes inside a certain div?

i would like to find all classes and ids inside a certain div ! and these css attributes!

Example :

<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>

Now The question is that: i would like to find all classes and ids which are used inside demo class ! and Their css values too(which style applying now. ). I would like to find result as below :

<style>
.demo{

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

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

</style>

Upvotes: 2

Views: 224

Answers (2)

chiliNUT
chiliNUT

Reputation: 19573

OP, not sure what your purpose is, but in general, this can be useful. I had a project where I needed to embed a fancy template from one site onto a page on a different site with a very different, and conflicting stylesheet. I used some code similar to the following to grab every applied style from the original content, via document.styleSheets, then reapplied them all as inline styles, so I could put it onto the "parent" site without the stylesheets conflicting.

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); }

Granted, you will have to tweak this on your own to do things like, removing duplicate styles that would occur if you were to apply this to a larger block of HTML, and for dealing with inline styles (which this does not attempt to do, but you can get them from the style attribute and work from there...), and possibly the computed style, which you can get with getComputedStyle, as indicated by the @Derek's answer. but this should get you started.

Upvotes: 3

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

To find all existing id, try:

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

Do the same thing for class or anything else.

However, to get your expected output, you must first acquire the defined CSS style for each element. Which one should be included? p by default gets margins and paddings. Do you include those too? You will also need to dig into all the CSS declarations just to find the style that are applied, which is almost impossible to do.

For example,

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

How do you get the background of the <div> tag? .style.background? Nah, it returns "". Well now you will have to reach into the CSS declaration with document.styleSheets to see which one applied. How do you even check if the rule div.yellow:not(.blue) matches your element? Good luck doing that. (There might be libraries that does this kind of thing, or maybe you can even utilize jQuery's internal selector engine with .is, though it will not be the same as in CSS) Another thing you can do is try getComputedStyle. It gives you every single computed styles that aren't even in your declaration. So what you are trying to do is not possible to do. (I don't even know what you are doing something like this.)

Upvotes: 2

Related Questions