How to remove all inline styles using JavaScript/jQuery ?

Given an HTML document containing inline and internal CSS and the task is to remove the inline CSS style from a particular element with the help of JavaScript.

Approach: The jQuery attr() and removeAttr() methods are used to remove the inline style property. The attr() method sets the attribute value to empty (”).

Example 1: This example uses attr() method to remove the inline style.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to remove all inline styles
        using JavaScript/jQuery ?
    </title>
      
    <script src=
    </script>
      
    <style>
        .parent {
            background: green;
        }
        .child1 {
            background: blue;
            margin: 10px;
        }
        .child2 {
            background: red;
            margin: 10px;
        }
    </style>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <div class="parent" id="parent" style="color:white">
        Parent
        <div class="child child1">
            Child1
        </div>
        <div class="child child2">
            Child2
        </div>
    </div>
    <br>
      
    <button onclick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "font-size: 24px; font-weight: bold; color: green;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var parent = document.getElementById('parent');
          
        up.innerHTML = "Click on the button to remove"
                            + " the inline style.";
  
        function GFG_Fun() {
            $('#parent').attr('style', '');
            down.innerHTML = "Inline style has been removed.";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: The jQuery removeAttr() method is used to remove the inline style property. The removeAttr() method removes the value of style attribute.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to remove all inline styles
        using JavaScript/jQuery ?
    </title>
      
    <script src=
    </script>
      
    <style>
        .parent {
            background: green;
        }
        .child1 {
            background: blue;
            margin: 10px;
        }
        .child2 {
            background: red;
            margin: 10px;
        }
    </style>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <div class="parent" id="parent" style="color:white">
        Parent
        <div class="child child1">
            Child1
        </div>
        <div class="child child2">
            Child2
        </div>
    </div>
    <br>
      
    <button onclick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "font-size: 24px; font-weight: bold; color: green;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var parent = document.getElementById('parent');
          
        up.innerHTML = "Click on the button to remove "
                        + "the inline style.";
  
        function GFG_Fun() {
            $('#parent').removeAttr('style');
            down.innerHTML = "Inline style has been removed.";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.