April 16, 2021

Programmingempire

In this post on Changing Style of HTML Elements using getElementsByClassName() Method, I will explain how to change the style properties of HTML elements with specific class attribute.

Changing Style of HTML Elements

To begin with, we will use the getElementsByClassName() method in this example. In order to perform a common operation on all the elements having the same class attribute value, we can use this method.

At first, we create an HTML document containing two DIV elements, two paragraphs, and a Button. The following code shows the markup for this document.

   <div class="c">
    <div class="d">
       <p class="p1">This is First Paragraph</p>
       <p class="p2">This is Second Paragraph</p>
    </div>
    <div class="d">
      <p class="p1">This is Third Paragraph</p>
      <p class="p2">This is Fourth Paragraph</p>
    </div>
    <div>
       <button name="b1" onclick="f1()">Change  Styles</button><br/><br/>
    </div>
   </div>

After that, we also create the style information of the outermost DIV element which has a class attribute value as c. The following code shows the internal stylesheet used here.

    <style>
      .c{
          margin: 40px;
          padding: 20px;
          background-color: #F5F5F5;
        }
    </style>

Now that, we have created our HTML document, let us open it in a browser. The following image shows the output.

For the purpose of changing the style properties of HTML elements with the click of a button, we create a function in JavaScript and assign it to the onclick event handler. The following code in JavaScript shows the function inside the <script> tag.

<script>
       function f1()
       {
          var v1=document.getElementsByClassName("d");
          for(let i=0;i<v1.length;i++)
          {
             v1[i].style.backgroundColor='#BA5971';
             v1[i].style.margin="30px";
             v1[i].style.padding="20px";
             v1[i].style.textAlign="center";
             v1[i].style.minHeight="100px";
          }
         var v2=document.getElementsByClassName("p1");
          for(let i=0;i<v2.length;i++)
          {
             v2[i].style.backgroundColor='#320F50';
             v2[i].style.color='#FCFBDC';
 	     v2[i].style.margin="10px";
             v2[i].style.fontSize="25px";
             v2[i].style.fontFamily='forte';
             v2[i].style.lineHeight="30px";
             v2[i].style.textAlign="center";
             v2[i].style.minHeight="100px";
          }
         var v3=document.getElementsByClassName("p2");
          for(let i=0;i<v3.length;i++)
          {
             v3[i].style.backgroundColor='#0A3B14';
             v3[i].style.color='#FBF8A2';
             v3[i].style.fontSize="20px";
             v3[i].style.margin="10px";
             v3[i].style.padding="20px";
             v3[i].style.textAlign="center";
             v3[i].style.fontFamily='Comic sans MS';
             v3[i].style.minHeight="100px";
          }
       }
    </script>

Basically, the function f1() will be called when a user clicks on the button. As can be seen, we retrieve the collection of HTML elements with a specific class attribute value in a variable. Further, using for loop, we can change the style properties of all elements in a particular collection of elements.

Further, we use the getElementsByClassId() method to retrieve the elements with specific class name. The complete code is shown below.

<html>
  <head>
    <title>Changing Styles Dynamically</title>
    <style>
      .c{
          margin: 40px;
          padding: 20px;
          background-color: #F5F5F5;
        }
    </style>
    <script>
       function f1()
       {
          var v1=document.getElementsByClassName("d");
          for(let i=0;i<v1.length;i++)
          {
             v1[i].style.backgroundColor='#BA5971';
             v1[i].style.margin="30px";
             v1[i].style.padding="20px";
             v1[i].style.textAlign="center";
             v1[i].style.minHeight="100px";
          }
         var v2=document.getElementsByClassName("p1");
          for(let i=0;i<v2.length;i++)
          {
             v2[i].style.backgroundColor='#320F50';
             v2[i].style.color='#FCFBDC';
 	     v2[i].style.margin="10px";
             v2[i].style.fontSize="25px";
             v2[i].style.fontFamily='forte';
             v2[i].style.lineHeight="30px";
             v2[i].style.textAlign="center";
             v2[i].style.minHeight="100px";
          }
         var v3=document.getElementsByClassName("p2");
          for(let i=0;i<v3.length;i++)
          {
             v3[i].style.backgroundColor='#0A3B14';
             v3[i].style.color='#FBF8A2';
             v3[i].style.fontSize="20px";
             v3[i].style.margin="10px";
             v3[i].style.padding="20px";
             v3[i].style.textAlign="center";
             v3[i].style.fontFamily='Comic sans MS';
             v3[i].style.minHeight="100px";
          }
       }
    </script>
  </head>
  <body>
   <div class="c">
    <div class="d">
       <p class="p1">This is First Paragraph</p>
       <p class="p2">This is Second Paragraph</p>
    </div>
    <div class="d">
      <p class="p1">This is Third Paragraph</p>
      <p class="p2">This is Fourth Paragraph</p>
    </div>
    <div>
       <button name="b1" onclick="f1()">Change  Styles</button><br/><br/>
    </div>
   </div>
  </body>
</html>

Output

**Demonstrating getElementsByClassName() Method**

Programmingempire

Changing Style of HTML Elements

Further Reading

You may also like...

How to Use Math Functions in JavaScript?

Understanding Document Object Model (DOM) in JavaScript

How to Use ID and Class Attributes in JavaScript?