CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jawad
Jawad

Reputation: 6672

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

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

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.

Upvotes: 0

Views: 466

Answers (1)

monitorjbl
monitorjbl

Reputation: 4350

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

Upvotes: 3

Related Questions