Cambiar propiedades CSS con JQuery
JQuery nos ofrece varias formas de manipular nuestros CSS de forma dinámica. Lo primero que tenemos que conocer es la forma de acceder a los distintos elementos que conforman nuestra página web. Esto lo podemos hacer con el extenso juego de selectores que nos ofrece JQuery: Selectores CSS, XPath, de Formulario,... Los más utilizados y con los que nos podremos manejar en la mayoría de ocasiones son:
Elemento: T
Todos los elementos que tienen una etiqueta con el nombre T.
Ejemplo:
$("div"): Selecciona todos los elementos con la etiqueta div del documento.
ID: #miId
El elemento cuyo Id sea igual a miId.
Ejemplo:
$("#test"): Selecciona el elemento cuyo id="test", independientemente del name que este elemento pudiera tener.
Una buena práctica a la hora de definir una página web es que cada id sea único. En el caso de que hubiera más de un elemento con el mismo id, el selector devolvería el primer elemento coincidente a través de la arquitectura DOM.
Class: .miclase
Selecciona todos los elementos que tienen una clase .miclase.
Ejemplos:
$(".miclase"): Selecciona todos los elementos que tienen una clase .miclase.
$("p.miclase"): Selecciona todos los elementos p (párrafos) que tienen una clase .miclase.
$(".miclase.otraclase"): Selecciona todos los elementos que tienen una clase .miclase y .otraclase.
Descendente: E F
Selecciona todos los elementos coincidentes con F que son descendientes del elemento E
Ejemplo:
$("#contenedor p"): Selecciona todos los elementos <p> que son descendientes de un elemento cuyo id es contenedor.
Como comentaba anteriormente, existen bastantes más selectores, pero con estos y con una buena planificación de nuestro HTML nos puede ser más que suficiente. Jugando con esto y con unos cuantos métodos para CSS podemos empezar a modificar el aspecto de nuestra web dinamicamente.
css(nombre)
Devuelve el valor de la propiedad de un estilo CSS, para el primer elemento encontrado. Por ejemplo, si tuviesemos el siguiente código HTML:
<p style="font-weight: bold;">Texto de ejemplo</p>Y la siguiente código javascript:
$(document).ready(function() {
var fuente = $("p").css("font-weight");
alert( fuente);
});
Nos mostraría un alert con el texto: "bold"css(propiedades)
Establece los valor a las propiedades especificadas en todos los elementos coincidentes. Muy útil si deseamos establecer un número grande de propiedades. Por ejemplo, si tuviesemos el siguiente código HTML:
<div>Texto de ejemplo</div>Y la siguiente código javascript:
$(document).ready(function() {
$("div").css({ color: "#FFFFFF", background: "#FF0000" });
});
Habríamos cambiado las propiedades de la capa, estableciendo el color de la fuente a blanco y su fondo a rojo.css(clave,valor)
Establece un valor a las propiedad especificad en todos los elementos coincidentes. Muy parecida a la instrucción anterior. Su uso sería:
$("p").css("color","red");
height()
Obtiene la altura en píxeles del primer elemento coincidente. Por ejemplo:
$("#test1").height();
Nos devolvería la altura en píxeles del div cuyo id fuera test1.width()
Obtiene la anchura en píxeles del primer elemento coincidente. Por ejemplo:
$("#test1").width();
Nos devolvería la anchura en píxeles del div cuyo id fuera test1.Un ejemplo muy sencillo podría ser que al hacer click sobre un texto pudiesemos cambiar el color de fondo de la web.
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").click(function () {
alert("OK");
$("body").css("background","red");
});
});
</script>
</head>
<body>
<p>Cambiar fondo</p>
</body>
</html>
Gracias a la fuente de información: http://webintenta.com/cambiar-propiedades-css-con-jquery.html
Comentarios
Publicar un comentario