Question Comment définir plusieurs attributs CSS dans JQuery?


Y a-t-il un moyen syntaxique dans JQuery de définir plusieurs attributs CSS sans tout enchaîner à droite comme ceci:

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

Si vous avez, disons, 20 d'entre eux, votre code deviendrait 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és sont optionnels, mais avec la notation CSS, ils sont obligatoires en raison du trait d'union dans le nom. - zanetu S


440
2018-01-15 15:35


origine


Réponses:


mieux vaut juste utiliser .addClass même si vous en avez 1 ou plus. Plus maintenable et lisible.

Si vous avez vraiment envie de faire plusieurs accessoires CSS, utilisez

NB Tout accessoire CSS avec un trait d'union doit être cité.

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

J'ai placé les citations afin que personne n'ait besoin de clarifier cela, et le code sera 100% fonctionnel.


818
2018-01-15 15:37



passez-lui un objet json:

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

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


150
2018-01-15 15:39



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

58
2018-01-15 15:37



En utilisant un objet simple, vous pouvez associer des chaînes qui représentent des noms de propriété avec leurs valeurs correspondantes. Changer la couleur de fond et rendre le texte plus audacieux, par exemple, ressemblerait à ceci:

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

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.


32
2018-01-15 15:39



s'il vous plaît essayez ceci,

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

15
2017-12-05 10:36



Vous pouvez aussi utiliser attr de même que style:

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

9
2018-01-07 10:29



D'accord avec Redsquare mais il vaut la peine de mentionner que si vous avez une propriété de deux mots comme text-align tu ferais ceci:

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

8
2018-01-15 19:02



Essaye ça

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

5
2018-03-04 13:09



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

En outre, il peut être préférable d'utiliser jQuery intégré dans addClass pour rendre votre projet plus évolutif.

La source: Comment: jQuery Ajouter CSS et supprimer CSS


5
2018-04-22 21:54



Vous pouvez essayer ceci

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

4
2017-08-25 17:41



Meilleure façon d'utiliser la variable

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

2
2017-12-01 00:16