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

Drehbuch

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

Html

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

Answer 2

Das können Sie versuchen

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

Answer 3

Wenn Sie mehrere CSS-Attribute ändern wollen, müssen Sie Objekt Struktur wie unten:

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

aber es wird schlechter wenn wir es wollen viel Stil ändern Was ich Ihnen also vorschlage, ist das Hinzufügen einer Klasse anstelle der Änderung von CSS mit jQuery, und das Hinzufügen einer Klasse ist auch besser lesbar.

siehe Beispiel unten:

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');
});

Ein Vorteil des letzteren Beispiels gegenüber dem ersten ist, dass Sie einige css hinzufügen können onclick von etwas und wollen, dass css auf den zweiten Klick zu entfernen, dann in letzterem Beispiel können Sie verwenden .toggleClass('custom-class')

wo in früheren Beispiel müssen Sie alle css mit verschiedenen Werten, die Sie zuvor eingestellt haben, und es wird kompliziert sein, so mit Klasse Option wird eine bessere Lösung sein.

Answer 4

Sie können verwenden

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

Der beste Weg ist die Verwendung von $('selector').addClass('custom-class') und

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