jQuery => Manipulación de CSS

Sintaxis

.css (cssProperty) // Obtiene el valor de la propiedad CSS representada
.css ([cssProperty, ...]) // Obtener valores de la matriz de cssProperties
.css (cssProperty, valor) // Establecer valor
.css ({cssProperty: value, ...}) // Establecer propiedades y valores
.css (cssProperty, function) // Exponer cssProperty a una función de devolución de llamada

Observaciones

Valores renderizados

Si se usa una unidad de respuesta (como "auto" , "%" , "vw" etc.), .css() devolverá el valor real renderizado en px

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

Formateo de propiedades y valores

Las propiedades se pueden definir usando el formato CSS estándar como String o usando camelCase

"margin-bottom"
marginBottom

Los valores deben expresarse en String. Los valores numéricos se tratan como unidades px internamente por jQuery

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

A partir de jQuery 3, evite utilizar .show() y .hide()

De acuerdo con esta publicación del blog de jQuery , debido a problemas de sobrecarga y rendimiento, ya no debe usar .show() o .hide() .

Si tiene elementos en una hoja de estilo que están configurados para display: none , el método .show() ya no lo reemplazará. Por lo tanto, la regla más importante para pasar a jQuery 3.0 es la siguiente: no use una hoja de estilo para establecer el valor predeterminado de display: none y luego intente usar .show() - o cualquier método que muestre elementos, como .slideDown() y .fadeIn() - para hacerlo visible. Si necesita que un elemento esté oculto de manera predeterminada, la mejor manera es agregar un nombre de clase como "oculto" al elemento y definir esa clase para display: none en una hoja de estilo. Luego puede agregar o eliminar esa clase utilizando los .addClass() y .removeClass() jQuery para controlar la visibilidad. Alternativamente, puede hacer que un controlador .ready() llame a .hide() en los elementos antes de que se muestren en la página. O, si realmente debe conservar el valor predeterminado de la hoja de estilo, puede usar .css("display", "block") (o el valor de pantalla apropiado) para anular la hoja de estilo.

Establecer propiedad CSS

Configuración de un solo estilo:

$('#target-element').css('color', '#000000');

Configurando múltiples estilos al mismo tiempo:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

Obtener propiedad CSS

Para obtener la propiedad CSS de un elemento, puede usar el método .css(propertyName) :

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

Incremento / Decremento de propiedades numéricas

Las propiedades numéricas de CSS se pueden incrementar y disminuir con la sintaxis += y -= , respectivamente, usando el método .css() :

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - Getters y Setters

CSS Getter

La función de captador .css() se puede aplicar a todos los elementos DOM en la página, como los siguientes:

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

Esta línea devolverá el ancho computado del elemento especificado, cada propiedad CSS que proporcione entre paréntesis dará el valor de la propiedad para este elemento DOM $("selector") , si solicita un atributo CSS que no existe obtendrá undefined como respuesta.

También puede llamar al captador de CSS con una matriz de atributos:

$("body").css(["animation","width"]);

Esto devolverá un objeto de todos los atributos con sus valores:

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

CSS Setter

El .css() método setter también se puede aplicar a cada elemento DOM en la página.

$("selector").css("width", 500);

Esta declaración establece el width del $("selector") a 500px y devuelve el objeto jQuery para que pueda encadenar más métodos al selector especificado.

El .css() setter también se puede utilizar pasar un objeto de propiedades CSS y valores como:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

Todos los cambios que hizo el colocador se agregan a la propiedad de style elemento DOM, lo que afecta los estilos de los elementos (a menos que el valor de la propiedad de estilo ya esté definido como !important en otro lugar en los estilos)

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

jQuery
Manipulación de CSS

Buscar..