Vamos a repasar la función de jQuery css(), su funcionalidad es la de obtener o cambiar los valores de las propiedades de una hoja de estilo CSS.
Otras funciones similares o con las que se puede complementar son:
Os muestro la sintaxis para obtener las propiedades de hojas de estilo extraída de su web oficial:
css(propertyname);
Os explico el único parámetro a pasar:
Os muestro la sintaxis de esta función de jQuery para cambiar las propiedades de hojas de estilo extraída de su web oficial:
css(propertyname, value);
Os explico los parámetros a pasar:
Vamos ya con los ejemplos de .css(), primero vamos a ver cómo obtener el valor de una propiedad CSS y mostrarla por pantalla:
$(document).ready(function(){ $("#boton").click(function(){ alert("El color del texto es " + $("#parrafo").css("color")); }); });
Os explico el código superior:
El código HTML del botón y el párrafo es el siguiente:
<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p> <p><input type="button" id="boton" value="Clicka para obtener la propiedad"></p>
En este ejemplo de .css() vamos a ver cómo cambiar o modificar el valor de una propiedad CSS:
$(document).ready(function(){ $("#boton").on("click",function(){ $("#parrafo").css("color", "#000000"); }); });
Os comento el código:
El código HTML del botón y el párrafo es el siguiente:
<p id="parrafo" style="color:#FF0040;">Esto es un párrafo de texto de color rojo.</p> <p><input type="button" id="boton" value="Clicka para cambiar la propiedad"></p>
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: