Comment définir plusieurs attributs CSS de JQuery?

Question

Est-il syntaxiques de façon JQuery pour définir plusieurs attributs CSS sans cordage tout à droite comme ceci:

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

Si vous avez, disons, 20 de ces votre code va devenir difficile à lire, toutes les solutions?

À partir de jQuery API: Par exemple, jQuery comprend et renvoie la valeur correcte pour les deux .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }).css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Remarquez qu'avec le DOM notation, de guillemets autour des noms de propriété sont facultatifs, mais avec la notation CSS ils sont nécessaires, à cause du trait d'union dans le nom. – zanetu S

Answer 1

mieux utiliser .addClass même si vous avez 1 ou plus. Plus facile à gérer et lisible.

Si vous avez vraiment envie de faire de multiples css accessoires puis utilisez

NB css accessoires avec un trait d'union doivent être indiqués.

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

Answer 2

passer un objet json:

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

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

Answer 3

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

Answer 4

À l'aide d'un objet ordinaire, vous pouvez jumeler les chaînes de caractères qui représentent les noms de propriété avec leurs valeurs correspondantes. Changer la couleur de fond, et de rendre le texte plus audacieux, par exemple, pourrait ressembler à ceci:

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

Alternativement, vous pouvez utiliser le JavaScript de la propriété des noms de trop:

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

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

Answer 5

s'il vous plaît essayer ce,

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