Ediciones ENI Editorial | líder en informática
Trabajar con las hojas de estilo CSS
Introducción
¿Es necesario resaltar la importancia de las hojas de estilo en la escritura del código de las páginas web? Con jQuery, la modificación dinámica de las propiedades de estilo CSS se hace más fácil de implementar.
El método css() que estudiamos en los tres primeros puntos de este capítulo recuerda al método attr() del capítulo anterior.
Acceder a una propiedad de estilo
El método css() se usa de tres maneras diferentes. La primera solo permite acceder a la propiedad de estilo CSS de un elemento determinado.
css(nombre)
Este método permite acceder a la propiedad de estilo CSS del primer elemento encontrado.
El nombre es una cadena de caracteres con el nombre de la propiedad de estilo CSS a la que se va a acceder.
Este método devuelve una cadena de caracteres (string).
$("p").css("color");
En este ejemplo, el método devuelve el valor de la propiedad CSS color del párrafo <p>.
Ejemplo
Supongamos que tenemos una página con tres cajas <div> idénticas:
El documento HTML completo:
doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js" ></script>
<script>
$(document).ready(function(){
$("#div1").click(function () {
var color = $(this).css("background-color");
$("#resultado").html("El color de fondo es <strong>" +
color + "</strong>.");
});
$("#div2").click(function...Modificar las propiedades de estilo
La función css(), que admite parámetros, también permite modificar las propiedades de estilo de los elementos de la página.
css({propiedad de estilo})
Esta función modifica las propiedades de estilo CSS de un elemento concreto usando la notación CSS clave/valor para las propiedades de estilo a modificar.
$("p").css({ color: "red", background: "blue" });
Observe la presencia de las etiquetas habituales para las declaraciones de estilo.
Si la clave contiene un guion de unión, como por ejemplo background-color, esta se debe ubicar entre comillas ("background-color").
También se puede adoptar la notación JavaScript (CamelCase), es decir backgroundColor, en lugar de background-color.
Este método devuelve un objeto jQuery.
Desde la versión 1.6 de jQuery, podemos usar valores relativos para modificar el valor de una propiedad de estilo CSS. Esto se puede codificar con "+=" o "-=", con respecto al valor actual.
$ ("#item").css("left", "+=10px")
En este ejemplo desplazamos el elemento item 10 píxeles a la izquierda.
Ejemplo
Vamos a ilustrar este método de jQuery con un ejemplo. Al pasar el ratón por encima de un párrafo, este tomará un color de fondo y el tipo de letra se mostrará en itálica.
Tras cargar la página:...
Asignar las propiedades de estilo
La función css() de jQuery proporciona una notación para aplicar propiedades de estilo.
css(clave,valor)
Modifica las propiedades de estilo de un elemento dado usando la notación clave/valor para las propiedades de estilo que se van a transformar.
-
clave (cadena de caracteres) corresponde al nombre de la propiedad de estilo que se va a modificar.
-
valor (cadena de caracteres o número) es el nuevo valor de la propiedad. Si se especifica un número, jQuery lo convierte automáticamente a píxeles.
$("p").css("color","red");
Este método devuelve un objeto jQuery.
Ejemplo
Tomemos dos cajas superpuestas. Con un script jQuery, vamos a modificar el orden de estas capas al pasar por encima el ratón.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js" ></script>
<script>
$(document).ready(function(){
$("#caja1").mouseover(function () {
$(this).css('z-index' , '10');
});
$("#caja1").mouseout(function () {
$(this).css('z-index'...El dimensionamiento
jQuery proporciona una serie de métodos relativos a la dimensión de los elementos.
height()
Devuelve la altura de un elemento, expresada en píxeles.
$("p").height();
Este método devuelve una cadena de caracteres (string).
height(valor)
Asigna una altura a los elementos especificados. Si no se especifica la unidad (como em o %), la unidad por defecto será px.
$("p").height(120);
Este método devuelve un objeto jQuery.
width()
Devuelve la anchura de un elemento, expresada en píxeles.
$("p").width();
Este método devuelve una cadena de caracteres (string).
width(valor)
Asigna una anchura a los elementos especificados. Si no se especifica ninguna unidad (como em o %), la unidad por defecto será px.
$("p").width(120);
Este método devuelve un objeto jQuery.
Desde la versión 1.4 de jQuery, es posible usar una función para modificar la altura y la anchura de los elementos de una selección.
Con la versión 3 de jQuery estas propiedades saben cómo devolver valores con decimales.
En este caso, la sintaxis sería:
height(función(índice, valor actual))
width(función(índice, valor actual))
Donde:
-
función especifica una función que devuelve el nuevo valor de la altura o de la anchura.
-
índice (opcional) es la posición del índice del elemento seleccionado.
-
valor actual...
El posicionamiento
De manera paralela a los métodos de jQuery relacionados con los elementos, jQuery tiene métodos para determinar la posición de los mismos.
position()
Devuelve el valor top y left de la posición de un elemento en relación a su elemento padre.
$("p:first").position();
Este método devuelve un objeto de tipo object{top,left}.
offset()
Devuelve el valor top y left de la posición de un elemento en relación al documento.
$("p:first").offset();
Este método devuelve un objeto de tipo object{top,left}.
Los métodos scrollTop(valor) y scrollLeft(valor) son más particulares, ya que permiten modificar la separación con respecto al borde superior o al borde izquierdo de un elemento. En cierto modo, estos métodos permiten controlar la amplitud de las barras de desplazamiento vertical y horizontal.
scrollTop(valor)
Modifica la separación (en píxeles) entre el borde superior del documento (top) y el elemento seleccionado, tomando el valor que se pasa como argumento.
valor: número positivo que representa la nueva distancia que se quiere aplicar (en píxeles).
$("div").scrollTop(300);
Este método devuelve un objeto jQuery.
scrollLeft(valor)
Modifica la separación (en píxeles) entre el borde izquierdo del documento (left) y el elemento seleccionado, tomando el valor que se pasa en el argumento....
Aplicaciones
1. Redimensionar el tamaño de los caracteres
Vamos a permitir al usuario modificar el tamaño de los caracteres a su voluntad, para mejorar la comodidad de la lectura.
Aspecto inicial:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('input').click(function(){
var texto = $('p');
var tamaño = texto.css('fontSize');
var numero = parseFloat(tamaño, 10);
var unidad = tamaño.slice(-2);
if(this.id == 'mas') {
numero *= 1.2;
}
else if (this.id == 'menos'){
numero /=1.2;
}
texto.css('fontSize', numero + unidad);
});
});
</script>
<style>
p {
font-size: 1em;
}
</style>
</head>
<body>
<input type="button" value="Más grande" id="mas">
<input type="button" value="Más pequeño" id="menos">
<p>Lorem ipsum dolor sit amet, magna adipiscing elit. Quisque at
cursus est. Phasellus id ligula massa. Quisque id lacus mauris.
Suspendisse vehicula tortor eu magna.</p>
</body>
</html>
El archivo a descargar es el C04-7.1.html.
Al hacer clic en un botón, el script jQuery va a permitir aumentar el tamaño de los caracteres. Existe un segundo botón para disminuirlo.
Aspecto del texto con un tamaño...
