Home/ Questions/Q 8580289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T20:47:49+00:00

Using Javascript/jQuery, is it possible to get the Property name along with it’s value

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0