Introduccion :

Una vez que hemos implementado la base para nuestro frameWork, es momento de empezar a incluir las diferentes funcionalidades que hagan nuestra api realmente util para su utilizacion en nuestros proyectos.

La primera de estas funciones es la que voy a implementar en el capitulo que nos ocupa y que nos permitira poder cambiar el aspecto, mediante propiedades CSS, de cualquiera de los elementos que componen nuestro documento HTML.

Implementacion

Recordar que el codigo que veremos a continuacion habra que incluirlo dentro de la clase principal, implementada en el capitulo 2, en el espacio dedicado a añadir nuevas funcionalidades, justo despues de la ultima funcion.

El codigo correspondiente a la funcion CSS es el siguiente:

Analisis de la funcion :

He implementado la funcion CSS para poder ejecutarla de 3 formas diferentes, dependiendo de los valores que pasamos como parametros :

1. El parametro "name" es un Array, de esta forma invocamos la funcion pasandole un array con las diferentes propiedades CSS acompañado de los respectivos valores a modificar.
   
   Ejemplo :
   
   
   1. /*
   2. Codigo a probar dentro del documento HTML
      
   3. */
   4. <div id="prueba">
   5.   Esto es una prueba
      
   6. </div>
   7. 
      
   8. <script>
   9. $('prueba').css({'color':'#ff00ff','fontSize':'25px'});
      
   10. </script>
       
2. La segunda posibilidad, seguramente la que mas utilizaermos, es una variante de la primera, pero esta vez el parametro "name" es una cadena de texto donde pasamos todos las propiedades CSS junto con sus valores a aplicar, separados por punto y coma.
   
   Ejemplo:
   
   
   1. /*
   2. Codigo a probar dentro del documento HTML
      
   3. */
   4. <div id="prueba">
   5.   Esto es una prueba
      
   6. </div>
   7. 
      
   8. <script>
   9. $('prueba').css('color:#ff00ff;fontSize:25px');
      
   10. </script>
3. La ultima posibilidad es la mas sencilla de todas, esta vez invocamos la funcion pasandole 2 cadenas de texto "name" y "value", la primera cadena es para indicar que propiedad quiero cambiar, mientras que la segunda cadena contiene el valor que queremos aplicar.
   
   Ejemplo :
   
   
   1. /*
   2. Codigo a probar dentro del documento HTML
      
   3. */
   4. <div id="prueba">
   5.   Esto es una prueba
      
   6. </div>
   7. 
      
   8. <script>
   9. $('prueba').css('color','#ff00ff');
      
   10. </script>
   
   

Como hemos visto existe 3 formas de ejecutar la funcion "css", seguramente sera la 2 la mas utilizada puesto que es facil de ejecutar y ademas, nos permite cambiar varias propiedades CSS de una sola vez.

Un punto en comin en las 3 posibilidades, es el bucle que recorre la cache de objetos del frameWork, aplicando los cambios solicitados a cada elemento. Esto es asi ya que como vimos en el capitulo 3 podremos seleccionar varios elementos de un documento HTML a traves de un selector.

Y aqui termino este articulo, espero que os haya resultado de interes, para cualquier duda u aclaracion no dudeis en preguntar, hasta luego y nos vemos en futuras publicaciones.