Como definir vários atributos CSS no jQuery?

Existe alguma maneira sintática no jQuery para definir vários atributos CSS sem colocar tudo à direita da seguinte maneira:

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

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

Na 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 a notação CSS, elas são necessárias devido ao hífen no nome.

Melhor usar apenas .addClass()se você tiver 1 ou mais. Mais sustentável e legível.

Se você realmente deseja executar várias propriedades CSS, use o seguinte:

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

NB!
Quaisquer propriedades CSS com um hífen precisam ser citadas.
Coloquei as aspas para que ninguém precise esclarecer isso, e o código será 100% funcional.

Passe como um objeto:

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

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

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

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

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

Como alternativa, você também pode usar os nomes de propriedade 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 attrjunto com style:

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

Concorde com o redsquare, no entanto, vale ressaltar que se você tiver uma propriedade de duas palavras como text-alignvocê, faria isso:

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

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

Além disso, pode ser melhor usar o jQuery incorporado addClasspara tornar seu projeto mais escalável.

Fonte: Como: jQuery Adicionar CSS e remover CSS

Tente isto

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

Roteiro

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

Html

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

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);

se você deseja alterar vários atributos css, é necessário usar a estrutura de objetos como abaixo:

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

mas fica pior quando queremos mudar muito de estilo , então o que eu sugiro é adicionar uma classe em vez de alterar o css usando o jQuery e adicionar uma classe também é mais legível.

veja o exemplo abaixo:

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');
});

Uma vantagem do último exemplo sobre o antigo é se você deseja adicionar algum css onclickde algo e deseja remover esse css no segundo clique e, no último exemplo, você pode usar.toggleClass('custom-class')

onde no exemplo anterior você deve definir todos os css com valores diferentes que você definiu anteriormente e será complicado, portanto, usar a opção de classe será uma solução melhor.

Você pode usar

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

A melhor maneira é usar $ ('selector'). AddClass ('custom-class') e

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