Agregar estilo a un elemento usando jQuery

La publicación de hoy discutirá cómo agregar estilo a un elemento usando jQuery.

Use .css() para agregar estilo a un elemento usando jQuery

jQuery proporciona una forma sencilla de agregar estilo a un elemento usando .css() para establecer una o más propiedades CSS para un conjunto de elementos coincidentes. Este enfoque puede tomar un nombre de propiedad y un valor como parámetros separados o un solo objeto de pares clave-valor.

Sintaxis:

.css(propertyName, value)

Dónde:

• propertyName es una cadena que representa el nombre de la propiedad CSS.
• valor es una cadena o número que representa el valor a establecer para la propiedad.

jQuery puede interpretar el formato CSS y DOM de propiedades de varias palabras por igual. Por ejemplo, jQuery entiende el valor correcto para:

.css({'background-color': '#fefefe', 'border-right': '2px solid #eee'})

y

.css({backgroundColor: '#fefefe', borderRight: 'solid 2px #eee'})

En la notación DOM, las comillas alrededor de los nombres de propiedades están disponibles opcionalmente; y en notación CSS, son obligatorios debido al guión dentro del nombre. Mientras que .css() se usa como setter, jQuery modifica la propiedad de estilo de un elemento.

Actualizar/establecer el valor de una propiedad de estilo en una cadena vacía, por ejemplo, $( "#div-1" ).css( "color", "" ), elimina la propiedad de un elemento si ya se ha aplicado directamente, ya sea en el atributo de estilo HTML, a través del método .css() de jQuery, o mediante la manipulación directa del DOM de la propiedad de estilo.

Como resultado, el estilo del elemento para esa propiedad vuelve al valor aplicado. Por lo tanto, este método puede cancelar cualquier cambio de estilo que haya realizado anteriormente. Además, .css() no admite declaraciones importantes.

El setter .css() automáticamente se encarga de anteponer el nombre de la propiedad. Puede encontrar más información sobre la documentación .css() para .css().

Entendámoslo con el siguiente ejemplo.

Código de ejemplo (HTML):

<div>Hello World!</div>

Código de ejemplo (JavaScript):

$('div').css({
  display: 'block',
  color: 'blue',
})

Hemos descrito una etiqueta div en el código de ejemplo anterior sin ningún estilo aplicado. A través de jQuery, estamos configurando el color del div como azul y la visualización como bloque.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Va a mostrar el siguiente resultado.

Antes de agregar una propiedad CSS, tenemos el siguiente resultado:

Después de agregar una propiedad CSS, esto se convierte en:

Puede ver la demostración en vivo del código de ejemplo anterior aquí.