Get Each and Every CSS Property and HTML Attribute for a Given Element

Question

Using Javascript/jQuery, is it possible to get the Property name along with it's value as well as the HTML Attribute name along with it's value for a given Element in a document. This is regardless if they are:

inline styles

<h1 style="font-weight="900">Heading 1</h1>

embedded

<style>
h1
{
font-weight: bold;
}
</style>

linked

<link href="main.css" rel="stylesheet" type="text/css" media="all" />

imported

 @import url("reset.css");

And regardless of the

User Agent/Browser (IE, FF, GC, AS, OP)
Default Styles Applied by the above
Versions of the above

Well, one could fireup the Firebug or the Developer Tools in FF, and similiar tools in other UA but they lack some abilities. I was looking for a jQuery plugin type where the element is displayed in the left side and all of the above shown in the right side (maybe in a iframe?).

I simply make a document (a very simple maybe with just one element say ) and have it displayed on the left side in my browser and the above displayed at the right.

possible duplicate of How can I get list of all element css attributes with jQuery? — Josh
– Josh, Commented Sep 6, 2012 at 21:02
@Josh: Probally more than 100 question like this one but I was seeking a "plugin" rather than the acutal code. Noob in Javascript/jQuery that I am. — Jawad
– Jawad, Commented Sep 6, 2012 at 21:09
@JohnKoerner: Tried but have no experience with Javascript/jQuery and therfore looking for a plugin. — Jawad
– Jawad, Commented Sep 6, 2012 at 21:10
@Josh: Yeah I saw that. But would have no idea how to implement it. — Jawad
– Jawad, Commented Sep 6, 2012 at 21:13

monitorjbl · Accepted Answer · 2012-09-23 17:24:23Z

3

+50

You can use the getComputedStyle() method of the document object and the attributes field of the element:

var oDiv = document.getElementById("div1");
var css = document.defaultView.getComputedStyle(oDiv, null);
var attr = oDiv.attributes;

This should return an object with fields for each CSS style the element has. You can then write a simple, depth-first tree-walk to iterate over every element in the DOM (I wrote this with jQuery to make it easy to follow):

var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
}

Note that I put a counter (i) in there to limit the number of iterations to 100 and keep you from blowing up your browser if your page has a ton of elements. You can remove this if you want, but be careful. Also note that the root of your search can be any node in the DOM, but I started with the html tag.

Based on your comments, I'm going to walk through how you would implement this. Keep in mind that all it does is print the CSS/attribute object to the console, you will need to modify that part to do what you actually want it to.

Script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>

HTML Button to run it

<button type="button" onclick="doStuff()">Click Me!</button>

Full implementation

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>
</head>
<body>
  <button type="button" onclick="doStuff()">Click Me!</button>
</body>
</html>

I'd be interested to hear what you're trying to accomplish with this. This is a slow operation, and there's not usually much benefit to examining the tags that you put on the page...

edited Sep 23, 2012 at 17:24

answered Sep 22, 2012 at 18:12

monitorjbl

4,3803 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jawad Over a year ago

I have all this code but I have no idea how to implement it. My page will ALWAYS contain only one element/tag per file. I will have a file say, "heading_1.html" with mimimum markup and with only one element, say "h1" and another file say, "paragraph.html" with only one element "p" and so on. I need to just run the script and get the HTML attributes as well as CSS properties. How do I "IMPLEMENT" your above code?

monitorjbl Over a year ago

I added code to get the attributes from the element. You can take this code exactly as is to implement it. It sounds like you can start with the body tag instead of the html tag. Since you won't have enough elements to hit the 100 item threshold, you wouldn't have to even remove the counter variable.

Jawad Over a year ago

You don't get me mate. What do I do with the code? Save it as JS and include it using the script tag? I save a JS file of the above code say, "css_prop.js" and include it in say, "heading_1.html" using <script> say, <script type="text/javascript" src="css_prop.js"></script>. This is how to implement it?

monitorjbl Over a year ago

You can put it inside a function and do that, yes. Do you know enough Javascript to actually use this code though? I just have it logging the variable to the console so you can inspect it in the Chrome developer console.

Jawad Over a year ago

Oh forget it. I will come back when I have learned enough JS. Thanks anyways.

|

Collectives™ on Stack Overflow

Get Each and Every CSS Property and HTML Attribute for a Given Element

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related