How to remove all inline styles using JavaScript/jQuery ?

Last Updated : 11 Oct, 2019

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.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to remove all inline styles 
        using JavaScript/jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </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> 

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.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to remove all inline styles 
        using JavaScript/jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </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> 