jueves, 28 de agosto de 2014

Tutorial Javascript parte 20 - getElementsByClassName()




En esta parte del tutorial veremos como utilizar el método getElementsByClassName() para acceder a los elementos del DOM HTML a través de su atributo class.

Al igual que ocurre con los métodos getElementsByName() o getElementsByTagName() este método obtiene un array con la lista de elementos a los que podremos acceder indivualmente de forma indexada.

Código del ejemplo del capítulo ...


<!DOCTYPE HTML>
<html>
<head>

<script>
window.onload = function()
   {
    var btn = document.getElementById("btn");
	btn.onclick = function()
	 {
	  var clase = document.getElementsByClassName("clase");
	  for (x=0; x<clase.length; x++)
	    {
		 clase[x].style.backgroundColor = "green";
		 clase[x].style.color = "white";
		}
	 }
   }
</script>

</head>
<body>

<div class="clase">Hola mundo</div>
<span class="clase">getElementsByClassName</span>
<strong class="clase">Aprendiendo javascript</strong>
<button id="btn" type="button">Cambiar estilos CSS</button>
</body>
</html>