JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

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.

Changing Style of HTML Elements
Changing Style of HTML Elements

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
Demonstrating getElementsByClassName() Method

Related Topics

Evolution of JavaScript from ES1 to ES2020

Understanding Document Object Model (DOM) in JavaScript

Introduction to Programming in TypeScript

Creating Classes in TypeScript

Working with Arrays in TypeScript

Significance of Tuples in TypeScript

Explaining Interfaces in TypeScript with Examples

How to Create and Use Arrow Functions in TypeScript

Understanding JSON Web Tokens

Java Practice Exercise

Introduction to HTML DOM Methods in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *