Remove All Styles From An Element Using JavaScript

Remove all Styles from an Element using JavaScript

During JavaScript web application development, we may get a requirement to remove all styles from an element. This article will share how to remove all styles from an element using JavaScript.

How to remove all styles from an element using JavaScript

To remove all styles from an element, we have the following two solutions:

  • Using the removeProperty() method
  • Using the removeAttribute() method

Now, we will take a closer look at each solution with specific examples for each of them.

Using the removeProperty() method

The removeProperty() method is used to remove the specified CSS property.

Syntax:

object.removeProperty(name)

Parameter: 

  • name: the name of the specified CSS property.

To remove all styles from an element using the removeProperty() method, you need to know the index of the styleSheets and the index of the cssRules.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      text-align: center;
      }
      #text {
      color: #1873d3;
      font-style: italic;
      }
      #btn {
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id = "text">LearnShareIT</h1>
    <button id = "btn" onclick="removeStyle()">Remove Styles</button>
    <script>
      function removeStyle() {
        // Get the cssRules of the first styleSheets
        const myRules = document.styleSheets[0].cssRules;
      
        // Get the second cssRule in the first styleSheets
        const property = myRules[1].style;
      
        // Remove all styles from an element whose id is "text"
        const value = property.removeProperty("color");
        const value1 = property.removeProperty("font-style");
      }
    </script>
  </body>
</html>

Output:

In this example, we want to remove all styles from an element whose id is “text”.

First, we use a document.styleSheets[0] .cssRules, this will return ‘myRules’ which is the cssRules of the first styleSheets.

Then myRules[0].style will return a CSSStyleDeclaration object on the second cssRule in the first styleSheets of the HTML document, called ‘property’, this is the cssRule of the element with the id “text”.

Finally, we call the removeProperty() method on all the properties contained in the newly received CSSStyleDeclaration object to remove all these properties.

Using the removeAttribute() method

The removeAttribute() method removes an attribute from an element.

Syntax:

element.removeAttribute(name)

Parameter:

  • name: The name of the attribute.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      text-align: center;
      }
      #btn {
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id = "text" style="color: #1873d3; font-style: italic">LearnShareIT</h1>
    <button id = "btn" onclick="removeStyle()">Remove Styles</button>
    <script>
      // Remove all styles from an element whose id is "text"
      function removeStyle() {
        const property = document.getElementById("text").removeAttribute("style");
      }
    </script>
  </body>
</html>

Output:

To remove all styles from an element using the removeAttribute() method, we need to use the getElementById() method to get an element with id “text”, then use the removeAttribute() method with the “style” parameter.

The case of setting properties using class.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      text-align: center;
      }
      .text {
      color: #1873d3;
      font-style: italic;
      }
      #btn {
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 id = "text" class = "text">LearnShareIT</h1>
    <button id = "btn" onclick="removeStyle()">Remove Styles</button>
    <script>
      // Remove all styles from an element whose id is "text"
      function removeStyle() {
        const property = document.getElementById("text").removeAttribute("class");
      }
    </script>
  </body>
</html>

Output:

Summary

This article has shown how to remove all styles from an element using JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer. Thank you for reading!

Maybe you are interested:

Leave a Reply

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