¿Cómo definir múltiples atributos CSS en jQuery?
¿Existe alguna forma sintáctica en jQuery para definir múltiples atributos CSS sin colocar todo a la derecha de esta manera?
$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");
Si tiene, digamos, 20 de estos, su código será difícil de leer, ¿alguna solución?
Desde jQuery API, por ejemplo, jQuery comprende y devuelve el valor correcto para ambos
.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })
y
.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).
Tenga en cuenta que con la notación DOM, las comillas alrededor de los nombres de las propiedades son opcionales , pero con la notación CSS son obligatorias debido al guión en el nombre.
Es mejor simplemente usarlo .addClass()e .removeClass()incluso si tiene 1 o más estilos para cambiar. Es más mantenible y legible.
Si realmente siente la necesidad de crear varias propiedades CSS, utilice lo siguiente:
.css({
'font-size' : '10px',
'width' : '30px',
'height' : '10px'
});
¡NÓTESE BIEN!
Cualquier propiedad CSS con un guión debe citarse.
He colocado las comillas para que nadie tenga que aclarar eso y el código será 100% funcional.
Pásalo como un objeto:
$(....).css({
'property': 'value',
'property': 'value'
});
http://docs.jquery.com/CSS/css#properties
