martes, 29 de octubre de 2013

Cambiar propiedades css de las clases con Javascript



Interesante: Vídeo Tutorial de Javascript, aprende a programar Javascript desde cero.

En el siguiente ejemplo puedes ver como es posible acceder a las clases mediante Javascript y cambiar sus propiedades CSS, el ejemplo consiste en una función que buscará el nombre de la clase indicada en el parámetro de la función getClass, si la clase es encontrada se le modificará los estilos CSS, concretamente el tamaño de fuente "fontSize", para que puedas rastrear todas las clases con Javascript es necesario esperar a que la página se haya terminado de cargar con window.onload.


<!DOCTYPE HTML>
<html>
<head>
<script>
getClass = function(name_class){
/*Buscar en todos los elementos (selector *)*/
var cl = document.getElementsByTagName("*");
/*Bucle para recorrer todos los elementos en buscar de la clase*/
for(i = 0; i < cl.length; i++) {
/*Si la clase es encontrada modificar el tamaño de fuente*/
if (cl[i].className == name_class) {
cl[i].style.fontSize = '30px';
}
}
}
/*Hay que utilizar window.onload para que funcione*/
window.onload = function(){
getClass("prueba");
}
</script>
</head>
<body>
<div class="prueba">Modificando las clases con Javascript</div>
<div class="prueba">Modificando las clases con Javascript</div>
</body>
</html>