¿Cómo ocultar un elemento HTML por clase usando JavaScript?

Suponga que ha proporcionado un documento HTML y la tarea es ocultar un elemento HTML por su nombre de clase con la ayuda de JavaScript. Hay dos enfoques para explicar con el ejemplo adecuado.

Enfoque 1: en este enfoque, el selector getElementsByClassName() se usa para seleccionar elementos de una clase específica. La indexación se utiliza para obtener el elemento en el índice respectivo. Para obtener acceso a la propiedad de visibilidad de CSS , podemos usar DOM style.visibility en los elementos para establecerlo en valor oculto .

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide an HTML element
        by class in JavaScript
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .geeks {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1> 
        GeeksforGeeks 
    </h1>
    <b> 
        Click on button to hide the element 
        by class name
    </b>
    <br>
    <div class="outer">
        <div class="child1">Child 1</div>
        <div class="child1">Child 1</div>
        <div class="child2">Child 2</div>
        <div class="child2">Child 2</div>
    </div>
    <br>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="geeks">
    </p>
    <script>
        var down = document.getElementById('GFG_DOWN');
  
        function GFG_Fun() {
            document.getElementsByClassName('child1')[0].
            style.visibility = 'hidden';
            down.innerHTML = "Element is hidden";
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: en este enfoque, el selector querySelectorAll() se usa para seleccionar elementos de una clase específica. La indexación se utiliza para obtener el elemento en el índice respectivo. Para obtener acceso a la propiedad de visibilidad de CSS , podemos usar DOM style.visibility en los elementos para establecerlo en valor oculto .

Ejemplo:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide an HTML element
        by class in JavaScript
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        .geeks {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1> 
        GeeksforGeeks 
    </h1>
    <b> 
        Click on button to hide the element 
        by class name
    </b>
    <br>
    <div class="outer">
        <div class="child1">Child 1</div>
        <div class="child1">Child 1</div>
        <div class="child2">Child 2</div>
        <div class="child2">Child 2</div>
    </div>
    <br>
    <button onClick="GFG_Fun()">
        click here
    </button>
    <p id="geeks"></p>
  
    <script>
        var down = document.getElementById('GFG_DOWN');
  
        function GFG_Fun() {
            document.querySelectorAll('.child1')[0].
            style.visibility = 'hidden';
            down.innerHTML = "Element is hidden";
        }
    </script>
</body>
  
</html>

Producció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 Cancelar la respuesta