web-dev-qa-db-fra.com

Comment définir plusieurs attributs CSS dans jQuery?

Existe-t-il une méthode syntaxique dans jQuery pour définir plusieurs attributs CSS sans tout aligner à droite, comme ceci:

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

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

Par exemple, à partir de l'API jQuery, 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 facultatif, mais avec la notation CSS, ils sont requis en raison du trait d'union dans le nom.

jquerycss
474
Edward Tanguay

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

Si vous avez vraiment envie de créer 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 pour que personne n'ait à le préciser et le code sera fonctionnel à 100%.

878
redsquare

transmettez-lui un objet json:

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

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

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

À l'aide d'un objet brut, vous pouvez associer des chaînes représentant les noms de propriétés avec leurs valeurs correspondantes. Changer la couleur de fond et rendre le texte plus gras, par exemple, ressemblerait à ceci:

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

Sinon, 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 documentation de jQuery .

36
Sampson

s'il vous plaît essayez ceci,

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

Vous pouvez également utiliser attr avec style:

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

D'accord avec redsquare, mais il vaut la peine de mentionner que si vous avez une propriété Word de deux caractères telle que text-align, vous obtiendrez ceci:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});
9
Darko Z
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

En outre, il peut être préférable d’utiliser le nom addClass de jQuery pour rendre votre projet plus évolutif.

Source: Comment: jQuery Ajouter CSS et supprimer CSS

8
Studio3

Essaye ça

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

Vous pouvez essayer ceci

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

essaye ça:

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

i.e bonjour est id dans div.

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

5
Rizo

Meilleure façon d'utiliser variable

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

si vous souhaitez modifier plusieurs attributs CSS, vous devez utiliser la structure object ci-dessous:

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

mais ça devient pire quand on veut changer beaucoup de style, donc ce que je vous suggère est d'ajouter une classe au lieu de changer de CSS en utilisant jQuery, et d'ajouter une classe est plus lisible aussi.

voir ci-dessous exemple:

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

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é; utiliser l'option de classe sera donc une meilleure solution.

1
Haritsinh Gohil