Home/ Questions/Q 9139929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:27:01+00:00

I tried to print the list of attributes values in a specific CSS class

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0