¿Cómo eliminar todos los estilos en línea usando JavaScript/jQuery?

Dado un documento HTML que contiene CSS en línea e interno, la tarea es eliminar el estilo CSS en línea de un elemento en particular con la ayuda de JavaScript.

Enfoque: los métodos jQuery attr() y removeAttr() se utilizan para eliminar la propiedad de estilo en línea. El método attr() establece el valor del atributo en vacío (”).

Ejemplo 1: este ejemplo usa el método attr() para eliminar el estilo en línea.

<!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>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: El método jQuery removeAttr() se usa para eliminar la propiedad de estilo en línea. El método removeAttr() elimina el valor del atributo de estilo.

<!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>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *