Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


jQuery css(): Obtener y cambiar las propiedades CSS

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:

Sintaxis de jQuery css() para obtener propiedades CSS

Os muestro la sintaxis para obtener las propiedades de hojas de estilo extraída de su web oficial:

Os explico el único parámetro a pasar:

  • propertyname (Obligatorio): Propiedad o atributo del cual queremos obtener su valor.

Sintaxis de jQuery css() para cambiar propiedades CSS

Os muestro la sintaxis de esta función de jQuery para cambiar las propiedades de hojas de estilo extraída de su web oficial:

Os explico los parámetros a pasar:

  • propertyname (Obligatorio): Propiedad o atributos del cual queremos cambiar su valor.
  • value (Obligatorio): Valor asignado a la propiedad o atributo.

Ejemplo de jQuery CSS para obtener el valor de una propiedad CSS

Vamos ya con los ejemplos de .css(), primero vamos a ver cómo obtener el valor de una propiedad CSS y mostrarla por pantalla:

Os explico el código superior:

  • Detectamos que se hace click en el elemento con id = ‘boton’, en este caso es un botón.
  • Sacamos un mensaje por pantalla mostrando el color de texto de un párrafo con id = ‘parrafo’.

El código HTML del botón y el párrafo es el siguiente:

Ejemplo de jQuery CSS para cambiar o modificar el valor de una propiedad CSS

En este ejemplo de .css() vamos a ver cómo cambiar o modificar el valor de una propiedad CSS:

Os comento el código:

  • Detectamos que se hace click mediante la función on() en el elemento con id = ‘boton’, en este caso es un botón.
  • Se modifica el color del texto del párrafo con id = ‘parrafo’, el texto cambia a color negro.

El código HTML del botón y el párrafo es el siguiente:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies