Modificar atributos de varios elementos con la misma clase usando Javascript

Saludos amigos, hoy aprenderemos a través de este articulo como podemos usar Javascript para cambiar las propiedades de varios elementos en nuestro DOM que contengan la misma clase.

Para este ejemplo tenemos una tabla con 5 filas cada una con la clase prueba, usando un sencillo código Javascript recorremos todo el DOM buscando los elementos que contengan esta clase.

<!DOCTYPE html>
<html lang="es">
<head>
        <script>
                function mostrar() {
                        var allHTMLTags = new Array();
                        var allHTMLTags = document.getElementsByTagName("*");
                        for (i=0; i<allHTMLTags.length; i++)
                {
                if (allHTMLTags[i].className=="prueba")
                {
                        allHTMLTags[i].style.display="table-row";
                }
                }
                }
                function ocultar() {
                        var allHTMLTags = new Array();
                        var allHTMLTags = document.getElementsByTagName("*");
                        for (i=0; i<allHTMLTags.length; i++)
                {
                if (allHTMLTags[i].className=="prueba")
                {
                        allHTMLTags[i].style.display="none";
                }
                }
                }
        </script>
        <style>
                table {
                        margin: auto;
                }
                td {
                        border-collapse: collapse;
                        text-align: center;
                        border: solid 1px black;
                }
                th {
                        background-color: blue;
                        color: white;
                }
                button {
                        width: 100px;
                        margin-left: 46.5%;
                }
        </style>
        <meta charset="UTF-8">
        <title>Ejemplo Multi Clases</title>
</head>
<body>
        <table>
                <tr>
                        <th>Filas de Prueba</th>
                </tr>
                <tr class="prueba">
                        <td><span>Texto1</span></td>
                </tr>
                <tr class="prueba">
                        <td><span>Texto2</span></td>
                </tr>
                <tr class="prueba">
                        <td><span>Texto3</span></td>
                </tr>
                <tr class="prueba">
                        <td><span>Texto4</span></td>
                </tr>
                <tr class="prueba">
                        <td><span>Texto5</span></td>
                </tr>
        </table>
        <br />
        <button onclick="mostrar()">Mostrar Filas</button>
        <button onclick="ocultar()">Ocultar Filas</button>
</body>
</html>

Si nos fijamos tenemos 2 botones uno que llama a la función mostrar y la otra ocultar cada una cambia el estilo display de todos los elementos de la clase prueba y se encargan de mostrarlos o ocultarlos cual sea el caso.

 

 

 

Tags: