Come definire più attributi CSS in jQuery?

Esiste un modo sintattico in jQuery per definire più attributi CSS senza stringere tutto a destra in questo modo:

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

Se hai, diciamo, 20 di questi, il tuo codice diventerà difficile da leggere, qualche soluzione?

Dall'API jQuery, ad esempio, jQuery comprende e restituisce il valore corretto per entrambi

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

e

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

Si noti che con la notazione DOM, le virgolette attorno ai nomi delle proprietà sono opzionali , ma con la notazione CSS sono richieste a causa del trattino nel nome.

Meglio usare solo .addClass()se ne hai 1 o più. Più gestibile e leggibile.

Se hai davvero l'impulso di fare più proprietà CSS, usa quanto segue:

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

NB!
Tutte le proprietà CSS con un trattino devono essere quotate.
Ho inserito le virgolette, quindi nessuno dovrà chiarirlo e il codice sarà funzionale al 100%.

Passalo come oggetto:

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

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

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

Utilizzando un oggetto semplice, è possibile accoppiare stringhe che rappresentano i nomi delle proprietà con i loro valori corrispondenti. Cambiare il colore di sfondo e rendere il testo più audace, ad esempio, sarebbe simile al seguente:

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

In alternativa, puoi utilizzare anche i nomi delle proprietà JavaScript:

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

Ulteriori informazioni sono disponibili nella documentazione di jQuery .

per favore prova questo,

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

Puoi anche usare attrinsieme a style:

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

Concordo con redsquare, tuttavia vale la pena ricordare che se si dispone di una proprietà di due parole come text-alignsi farebbe questo:

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

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

Inoltre, potrebbe essere meglio utilizzare jQuery integrato addClassper rendere il tuo progetto più scalabile.

Fonte: How To: jQuery Aggiungi CSS e Rimuovi CSS

Prova questo

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

copione

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

html

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

Puoi provare questo

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

Il modo migliore per usare la variabile

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

se si desidera modificare più attributi CSS, è necessario utilizzare la struttura degli oggetti come di seguito:

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

ma peggiora quando vogliamo cambiare molto stile , quindi quello che ti consiglio è di aggiungere una classe invece di cambiare CSS usando jQuery e anche l'aggiunta di una classe è più leggibile.

vedi sotto esempio:

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

Un vantaggio di quest'ultimo esempio rispetto a precedente è se si desidera aggiungere alcuni CSS onclickdi qualcosa e si desidera rimuovere quel CSS al secondo clic, quindi in quest'ultimo esempio è possibile utilizzare.toggleClass('custom-class')

dove nell'esempio precedente devi impostare tutti i CSS con valori diversi che hai impostato in precedenza e sarà complicato, quindi usare l'opzione class sarà la soluzione migliore.

Puoi usare

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

Il modo migliore è usare $ ('selector'). AddClass ('custom-class') e

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