¿Cómo definir múltiples atributos CSS en jQuery?

¿Hay alguna forma sintáctica en jQuery para definir múltiples atributos CSS sin encadenar 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" }).

Observe que con la notación DOM, las comillas alrededor de los nombres de propiedad son opcionales , pero con la notación CSS son necesarias debido al guión en el nombre.

Es mejor usarlo .addClass()incluso si tiene 1 o más. Más mantenible y legible.

Si realmente tiene ganas de hacer varias propiedades CSS, use lo siguiente:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

¡NÓTESE BIEN!
Cualquier propiedad CSS con un guión debe ser citada.
He colocado las citas para que nadie necesite 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

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Con un objeto simple, puede emparejar cadenas que representan nombres de propiedades con sus valores correspondientes. Cambiar el color de fondo y hacer que el texto sea más audaz, por ejemplo, se vería así:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

Alternativamente, también puede usar los nombres de propiedad de JavaScript:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

Se puede encontrar más información en la documentación de jQuery .

por favor intente esto,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

También puede usar attrjunto con style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

De acuerdo con redsquare, sin embargo, vale la pena mencionar que si tiene una propiedad de dos palabras como text-alignlo haría:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Además, puede ser mejor usar jQuery integrado addClasspara hacer que su proyecto sea más escalable.

Fuente: Cómo: jQuery Agregar CSS y quitar CSS

Prueba esto

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

Guión

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

HTML

<div id="hello"></div>

Puedes probar esto

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

La mejor manera de usar variables

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

Si desea cambiar varios atributos de CSS, debe usar la estructura de objeto como se muestra a continuación:

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

pero empeora cuando queremos cambiar mucho estilo , así que lo que te sugiero es agregar una clase en lugar de cambiar css usando jQuery, y agregar una clase también es más legible.

ver abajo ejemplo:

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

Una ventaja de este último ejemplo sobre el anterior es que si desea agregar algo de CSS onclickde algo y desea eliminar ese CSS en el segundo clic, en este último ejemplo puede usar.toggleClass('custom-class')

donde, en el ejemplo anterior, debe establecer todos los css con diferentes valores que haya establecido anteriormente y será complicado, por lo que usar la opción de clase será una mejor solución.

Puedes usar

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

La mejor manera es usar $ ('selector'). AddClass ('custom-class') y

.custom-class{
width:16px,
color: green;
margin: 0;
}