Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

jQuery (VI)

Estilos CSS

El método .css()

Para manipular los estilos con jQuery utilizaremos el método .css(). este método vale igual para lectura y para escritura. Veamos su funcionamiento.

Lectura de elementos CSS

Si nos interesa saber qué estilo CSS se ha aplicado a un elemento le pasamos al método .css() como primer parámetro el nombre de la propiedad:

fuente=$("#prin p").css("font-family");

En este ejemplo queremos saber el tipo de letra de este mismo párrafo que estamos leyendo, el cual está dentro de un div con id="prin". Recogemos la información en la variable fuente, y después la sacamos en pantalla en un elemento con id="respuesta1", mediante el siguiente código:

$("#respuesta1").html("Tipo de letra de estos párrafos: "+fuente);

Recordemos que tanto esta línea como la anterior deben estar dentro de la estructura "document ready". El resultado será algo como lo siguiente :

Escritura de elementos CSS

Sin embargo lo que suele ser más habitual es querer modificar un estilo CSS dentro de la página, para ello jQuery emplea también el método .css(), al que le pasamos dos parámetros, el primero es la propiedad, y el segundo su valor:

$("#capa1").css("background-color","yellow");

Si la propiedad existía anteriormente, ésta cambia su valor; de no ser así , la propiedad se crea y se añade a las ya existentes, con el valor que le demos.

El nombre de la propiedad, cuando es compuesto, podemos pasarlo tanto en la nomenclatura utilizada en css, como el la utilizada en javascript. Podemos escribir tanto background-color como backgroundColor; las dos formas son válidas.

Veamos un ejemplo, tenemos el recuadro de la derecha, el cual lo mostramos mediante el siguiente código html:

<div id="capa1"></div>

Para poder verlo le hemos añadido en el CSS algunas propiedades, como el "width", "heigth" y "border", sin embargo eso no es lo que nos interesa.

Ahora pondremos unos botones en los que al pulsar en ellos, al recuadro le cambia el color de fondo:

Cambia el color de fondo:

... ... ...

Veamos el código que hemos usado para realizar este efecto. En primer lugar este es el código html, para crear los botones:

<p><b>Cambia el color de fondo: </b></p>
<p><input type="button" value="amarillo" onclick="color('yellow')" /> ...
<input type="button" value="rojo" onclick="color('red')" /> ...
<input type="button" value="verde" onclick="color('green')" /> ...
<input type="button" value="azul" onclick="color('blue')" /> </p>

Destacamos aquí el evento "onclick" que hemos añadido a cada uno de los botones. Éste nos lleva a una función llamada color(), a la que le pasamos como argumento el nombre del color en CSS.

Ahora veamos el código en javascript y jQuery que hemos empleado:

function color(valor) {
      $("#capa1").css("background-color",valor);
      }

Como podemos ver, más simple no puede ser el código, con una sola línea dentro de una función hemos realizado el efecto.

Cuando tenemos que cambiar varias propiedades CSS dentro de un mismo selector, podemos usar la estrutura ya vista anteriormente con los atributos, por ejemplo:

$(#capa2).css({
"background-color" : "yellow" ,
"color" : "navy" ,
"width" : "200px" ,
"height" : "150px"
});

Observa que dentro del paréntesis ponemos unas llaves, y ahí dentro, las parejas "propiedad" : "valor". Los dos elementos de la pareja van separados por dos puntos. A su vez cada pareja va separada de la siguiente por una coma.

Los métodos de "clase"

Una serie de métodos permiten añadir o quitar atributos de clase a los elementos seleccionados:

.addClass() : Este método añade un atributo "class" al elemento seleccionado.

$("#respuesta2").addClass("verde");

Debemos haber creado previamente la clase indicada en la hoja de estilos, por lo tanto, para este ejemplo dentro del código CSS escribiremos:

.verde { color: green; }

.removeClass() : Este método elimina un atributo de clase, dentro del elemento seleccionado:

$("#respuesta2").removeClass("verde");

Estos métodos no cambian la hoja de estilos, sino el atributo "class", por lo tanto si hemos eliminado una clase de un selector, y luego la volvermos a añadir, el elemento volverá a tener las propiedades que tiene esa clase.

.toggleClass() : Este es tal vez el método más interesante, ya que analiza el elemento seleccionado, y le añade la clase indicada si éste no la tenía, y en el caso de que ya la tenga, la elimina.

Veamos un ejemplo: en primer lugar incluimos la clase en la hoja de estilos:

.fondoazul { background-color: aqua; }

Después incluimos el código html para incluir el elemento en la página:

<span id="respuesta2">Pulsame para que cambie de color</span>

Luego en el código javascript incluimos las siguientes líneas:

$(document).ready(function(){ 
   $("#respuesta2").click(function(){
      $(this).toggleClass("fondoazul");
   });
});

Cabe destacar el empleo del elemento this para referirnos al mismo elemento que hemos puesto en el selector. esto nos evita tener que repetirlo.

El resultado será parecido a lo que tenemos en el siguiente recuadro:

En la próxima página veremos un tema que puede sernos de gran utilidad para trabajar con las páginas: obtener las medidas de los elementos.

Obtener medidas

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com