Wie definiert man mehrere CSS-Attribute in jQuery?

Question

Gibt es eine syntaktische Möglichkeit in jQuery, mehrere CSS-Attribute zu definieren, ohne alles auf der rechten Seite wie diese Zeichenfolge:

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

Wenn Sie, sagen wir, 20 davon haben, wird Ihr Code schwer lesbar, gibt es Lösungen?

Von jQuery API, zum Beispiel, versteht jQuery und gibt den richtigen Wert für beide

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

y

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

Beachten Sie, dass in der DOM-Notation die Anführungszeichen um die Eigenschaftsnamen optional aber mit der CSS-Notation sind sie erforderlich wegen des Bindestrichs im Namen.

Answer 1

Besser ist es, einfach die .addClass() y .removeClass() auch wenn Sie 1 oder mehrere Stile zu ändern haben. Es ist wartungsfreundlicher und besser lesbar.

Wenn Sie wirklich den Drang haben, mehrere CSS-Eigenschaften zu erstellen, dann verwenden Sie Folgendes:

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

ACHTUNG!
Alle CSS-Eigenschaften mit einem Bindestrich müssen zitiert werden.
Ich habe die Anführungszeichen so gesetzt, dass niemand das klären muss, und der Code wird zu 100 % funktionieren.

Answer 2

Übergeben Sie es als Objekt:

$(....).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

Mit einem einfachen Objekt können Sie Zeichenketten, die Eigenschaftsnamen darstellen, mit den entsprechenden Werten verknüpfen. Die Hintergrundfarbe zu ändern und den Text fetter zu machen, würde zum Beispiel so aussehen:

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

Alternativ dazu können Sie auch die JavaScript-Eigenschaftsnamen verwenden:

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

Weitere Informationen finden Sie unter Dokumentation von jQuery .

Answer 5

Bitte versuchen Sie dies,

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