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