Como definir vários atributos CSS no JQuery?

Existe alguma maneira sintática no JQuery para definir vários atributos CSS sem vincular tudo à direita como este:

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

Se você tiver, digamos, 20 deles, seu código ficará difícil de ler, qualquer solução?

Da API do jQuery, por exemplo, o jQuery entende e retorna o valor correto para ambos

 .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

e

 .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). 

Observe que, com a notação DOM, as aspas ao redor dos nomes das propriedades são opcionais, mas com notação CSS elas são necessárias devido ao hífen no nome. – zanetu S

melhor apenas usar .addClass mesmo se você tiver 1 ou mais. Mais sustentável e legível.

Se você realmente tem o desejo de fazer vários props css, então use

NB Quaisquer adereços de CSS com um hífen precisam ser citados.

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

Eu coloquei as aspas para que ninguém precise esclarecer isso, e o código estará 100% funcional.

passá-lo um object json:

 $(....).css({ 'property': 'value', 'property': 'value' }); 

http://docs.jquery.com/CSS/css#properties

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

Usando um object simples, você pode emparelhar cadeias que representam nomes de propriedades com seus valores correspondentes. Alterar a cor de fundo e tornar o texto mais arrojado, por exemplo, ficaria assim:

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

Como alternativa, você também pode usar os nomes das propriedades do JavaScript:

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

Mais informações podem ser encontradas na documentação do jQuery .

por favor tente isso,

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

Você também pode usar attr junto com o style :

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

Concordo com o redsquare no entanto vale a pena mencionar que se você tem uma propriedade de duas palavras como text-align você faria isso:

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

Tente isso

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

Além disso, pode ser melhor usar o addClass integrado do jQuery para tornar seu projeto mais escalável.

Fonte: How To: jQuery Adicionar CSS e Remover CSS

Você pode tentar isso

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

Melhor maneira de usar variável

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

tente isto:

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

ou seja, olá é id em div.