Comment définir plusieurs attributs CSS dans jQuery?

Existe-t-il un moyen syntaxique dans jQuery pour définir plusieurs attributs CSS sans enchaîner tout à droite comme ceci:

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

Si vous en avez, disons, 20, votre code deviendra difficile à lire, des solutions?

À partir de l'API jQuery, par exemple, jQuery comprend et renvoie la valeur correcte pour les deux

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

et

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

Notez qu'avec la notation DOM, les guillemets autour des noms de propriété sont facultatifs , mais avec la notation CSS, ils sont requis en raison du trait d'union dans le nom.

Mieux vaut simplement utiliser .addClass()même si vous en avez 1 ou plus. Plus maintenable et lisible.

Si vous avez vraiment envie de faire plusieurs propriétés CSS, utilisez ce qui suit:

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

NB!
Toutes les propriétés CSS avec un tiret doivent être citées.
J'ai placé les guillemets donc personne n'aura besoin de clarifier cela, et le code sera 100% fonctionnel.

Passez-le comme un objet:

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

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

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

À l'aide d'un objet simple, vous pouvez associer des chaînes qui représentent des noms de propriété avec leurs valeurs correspondantes. Changer la couleur d'arrière-plan et rendre le texte plus audacieux, par exemple, ressemblerait à ceci:

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

Alternativement, vous pouvez également utiliser les noms de propriété JavaScript:

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

Plus d'informations peuvent être trouvées dans la documentation de jQuery .

veuillez essayer ceci,

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

Vous pouvez également utiliser attravec style:

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

D'accord avec redsquare mais il convient de mentionner que si vous avez une propriété de deux mots comme text-alignvous le feriez:

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

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

En outre, il peut être préférable d'utiliser la fonction intégrée de jQuery addClasspour rendre votre projet plus évolutif.

Source: Comment: jQuery Ajouter CSS et supprimer CSS

Essaye ça

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

Scénario

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

Html

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

Vous pouvez essayer ceci

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

Meilleure façon d'utiliser la variable

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

si vous souhaitez modifier plusieurs attributs css, vous devez utiliser la structure d' objet comme ci-dessous:

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

mais cela empire lorsque nous voulons changer beaucoup de style , donc ce que je vous suggère est d'ajouter une classe au lieu de changer css en utilisant jQuery, et ajouter une classe est aussi plus lisible.

voir l'exemple ci-dessous:

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 avantage de ce dernier exemple par rapport à l'ancien est que si vous voulez ajouter du CSS onclickde quelque chose et que vous voulez supprimer ce CSS au deuxième clic, dans ce dernier exemple, vous pouvez utiliser.toggleClass('custom-class')

où dans l'exemple précédent, vous devez définir tous les CSS avec des valeurs différentes que vous avez définies auparavant et ce sera compliqué, donc l'utilisation de l'option de classe sera une meilleure solution.

Vous pouvez utiliser

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

La meilleure façon est d'utiliser $ ('selector'). AddClass ('custom-class') et

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