Print list of attributes from a CSS class

S

3

1

I tried to print the list of attributes values in a specific CSS class with the getElementsByClassName method like below :

<html>
    <head>
        <style>
            .toto {
                width:200px;
                height:50px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="lol" class="toto"></div>
        <script language="javascript" type="text/javascript">
            var toto = document.getElementsByClassName('toto');
            if (toto) {
                for (int i; i < toto.length; i++)
                    document.write(toto[i]);
            }
        </script>
    </body>
</html>

But toto.length = 1 in all cases. I would like to print the values '200px', '50px' et 'red'. Does anyone can help me ? Thanks a lot in advance for your help.

Stercoraceous answered 14/1, 2013 at 12:11 Comment(1)

getElementsByClassName returns the DOM elements with said class (and there is only one). It does not let you access the CSS rules of that class. For a solution, have a look at the bottom of this answer. – Yellowknife 14/1, 2013 at 12:14

A

0

If you get a reference to an element through JavaScript you can generally only get CSS properties that have been set through inline CSS using the style-attribute of the element. Properties applied through CSS can not be read through the element as properties of that element.

You can however use window.getComputedStyle() within your loop to get the final computed CSS that has been applied to the element.

In your case it would be something like:

var toto = document.getElementsByClassName('toto');
if (toto) {
   for (int i; i < toto.length; i++)
      // Log the height of each element
      console.log(getComputedStyle(toto[i], null).getPropertyValue("height"));
   }
}

Notice that the browser-support is somewhat limited (IE9+).

Atonality answered 14/1, 2013 at 12:16 Comment(0)

Y

1

I think you have misunderstood what getElementsByClassName does.

getElementsByClassName returns all HTML elements (tags) that have a class assigned - in your example this is one div, which is why toto.length == 1.

I'm not aware of any DOM methods for enumerating properties for a given CSS selector. However you can use tools like FireBug or Chrome's developer tools to inspect elements and see which CSS rules have been applied, and which properties have been modified.

Yorgos answered 14/1, 2013 at 12:14 Comment(0)

A

0

If you get a reference to an element through JavaScript you can generally only get CSS properties that have been set through inline CSS using the style-attribute of the element. Properties applied through CSS can not be read through the element as properties of that element.

You can however use window.getComputedStyle() within your loop to get the final computed CSS that has been applied to the element.

In your case it would be something like:

var toto = document.getElementsByClassName('toto');
if (toto) {
   for (int i; i < toto.length; i++)
      // Log the height of each element
      console.log(getComputedStyle(toto[i], null).getPropertyValue("height"));
   }
}

Notice that the browser-support is somewhat limited (IE9+).

Atonality answered 14/1, 2013 at 12:16 Comment(0)

E

0

I won't repeat what others have yet pointed regarding getElementsByClassName returning more than one elements, but I think your approach isn't the best one if you're interested in knowing what's in your style and not what's in a specific element (on which many styles are usually applied).

Here's a solution working even without element having the class toto :

function findStyle(selector) {
  for (var i=document.styleSheets.length; i-->0;) {
    for (var j = document.styleSheets[i].cssRules.length; j-->0;) {
      var r = document.styleSheets[i].cssRules[j];
      if (r.selectorText==selector) return r;
    }
  }
}
var style = findStyle('.toto');
console.log(style.style.width, style.style.height, style.style['background-color']);

This logs on the console 200px 50px red

Demonstration

Exordium answered 14/1, 2013 at 12:20 Comment(0)

Recommended topics

Hot tags