Bienvenid@s, hoy vamos a ver un método javascript muy interesante y que nos va a permitir acceder a los elementos que contengan una determinada clase, el método se llama getElementsByClassName(class), este método es un array que almacena los elementos que contienen la clase indicada, luego se puede acceder a cada uno de los elementos a través de un búcle e ir realizando las modificaciones oportunas sobre el elemento que contiene dicha clase. Para que funcione correctamente, hay que utilizar el evento onload para esperar a que se carguen los elementos del DOM HTML, de lo contrario te regresará un array vacío.
Uno de los inconvenientes que tiene es que no es compatible que algunas versiones antiguas de navegadores ...
Aunque sin duda es un método que hay que tener muy en cuenta, ya que las viejas versiones de internet explorer como la 6, 7 y 8 ya se están viendo relegadas al olvido y muchos desarrolladores web han decidido dejarlos de lado, de hecho Jquery ya no desarrolla para compatibilizar con esos browsers.
A continuación puedes ver un ejemplo práctico de como utilizar getElementsByClassName ...
<!DOCTYPE HTML>
<html>
<head>
<!-- By http://jquery-manual.blogspot.com -->
<title>getElementsByClassName(class)</title>
<script>
/* Como utilizar getElementsByClassName en Javascript */
/* Para poder acceder a las clases es necesario utilizar el evento onload
para esperar a que se carguen todos los elementos del DOM HTML */
window.onload = function(){
//getElementByClass es un array que almacena todas las clases por su nombre
var clases = document.getElementsByClassName("clase");
/*Ahora es momento de ir recorriendo uno a uno los elementos de la clase e ir
realizando las modificaciones oportunas*/
for (x = 0; x < clases.length; x++)
{
clases[x].style.color = "orange";
clases[x].style.fontSize = "23px";
clases[x].style.backgroundColor = "black";
}
}
</script>
</head>
<body>
<div class="clase">Un div con la clase</div>
<div class="clase">Otro div con la clase</div>
</body>
</html>
Resultado, los elementos de la clase han sido modificados correctamente ...
No hay comentarios:
Publicar un comentario