Manipulando estilos desde javascript

Aquí declaramos tres botones.

• Uno llama a la función modificarColor(color); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueSeCambia" y asignar su color con el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere establecer como color, en este caso red).
• Otro llama a la función modificarTamanoFuente(tamanoFuente); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueSeCambia" y asignar su tamaño de fuente con el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere establecer como tamaño y éste es un string con el valor y la unidad de medida, en este caso 18 unidades de px).
• Por último, uno que llama a la función modificarFuente(familiaDeFuentes); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueSeCambia" y asignar su familia de fuentes con el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere establecer como familia de fuentes a utilizar, en este caso Comic Sans MS).

Aquí declaramos tres botones, los cuales tienen 2 funciones: asignar el atributo class del elemento y concatenar una clase para que sea utilizada en el elemento. En este caso utilizaremos las clases alert de bootstrap, pero aplica a cualquier clase de igual forma.

• Uno llama a la función asignarClase(nombreClase); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueCambiaClases" y asignar su atributo clase con el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere establecer como color, en este caso alert).
• Otro que llama a la función agregarClase(nombreClase); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueCambiaClases" y agregar una clase a la lista de clases que tiene asignadas ese elemento según el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere agregar como clase para utilizarse, siendo en este caso alert-danger).
• Por último, uno que llama a la función agregarClase(nombreClase); definida en el archivo manipulando-estilos.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divQueCambiaClases" y agregar una clase a la lista de clases que tiene asignadas ese elemento según el valor recibido por parámetro en la función (notar que en el html se está pasando como parámetro el valor que se quiere agregar como clase para utilizarse, siendo en este caso alert-info).

Aplicar Toggle de una clase a un elemento hará que si el elemento no tiene la clase la aplique y si ya la tenía simplemente la deje de tener.
Aquí declaramos tres botones, los cuales llaman a la función alternarClase(idDelElemento, nombreClase); localizada en el archivo manipulando-estilos.js. Para ver detalles de la implementación de la función ver el archivo js de referencia. En este caso utilizaremos las clases bg-color de bootstrap , pero aplica a cualquier clase de igual forma.