Wie definiere ich mehrere CSS-Attribute in jQuery?

Gibt es in jQuery eine syntaktische Möglichkeit, mehrere CSS-Attribute zu definieren, ohne alles wie folgt nach rechts auszurichten:

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

Wenn Sie beispielsweise 20 davon haben, wird Ihr Code schwer zu lesen sein. Gibt es Lösungen?

In der jQuery-API beispielsweise versteht jQuery den korrekten Wert für beide und gibt ihn zurück

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

und

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

Beachten Sie, dass bei der DOM-Notation Anführungszeichen um die Eigenschaftsnamen optional sind, bei der CSS-Notation jedoch aufgrund des Bindestrichs im Namen erforderlich sind .

Besser nur verwenden, .addClass()auch wenn Sie 1 oder mehr haben. Wartbarer und lesbarer.

Wenn Sie wirklich den Drang haben, mehrere CSS-Eigenschaften auszuführen, verwenden Sie Folgendes:

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

NB!
Alle CSS-Eigenschaften mit einem Bindestrich müssen in Anführungszeichen gesetzt werden.
Ich habe die Anführungszeichen so platziert, dass niemand dies klären muss, und der Code ist zu 100% funktionsfähig.

Übergeben Sie es als Objekt:

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

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

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

Mithilfe eines einfachen Objekts können Sie Zeichenfolgen, die Eigenschaftsnamen darstellen, mit den entsprechenden Werten koppeln. Das Ändern der Hintergrundfarbe und das Mutieren von Text würde beispielsweise folgendermaßen aussehen:

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

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

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

Weitere Informationen finden Sie in der Dokumentation von jQuery .

Bitte versuchen Sie dies,

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

Sie können auch attrzusammen mit verwenden style:

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

Stimmen Sie mit redsquare überein, es ist jedoch erwähnenswert, dass Sie Folgendes text-aligntun würden , wenn Sie eine Zwei-Wörter-Eigenschaft wie diese haben:

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

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

Es ist möglicherweise auch besser, jQuery's addClasszu verwenden, um Ihr Projekt skalierbarer zu machen.

Quelle: Gewusst wie: jQuery CSS hinzufügen und CSS entfernen

Versuche dies

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

Skript

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

Html

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

Sie können dies versuchen

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

Beste Möglichkeit, Variablen zu verwenden

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

Wenn Sie mehrere CSS-Attribute ändern möchten, müssen Sie die Objektstruktur wie folgt verwenden:

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

Aber es wird schlimmer, wenn wir viel Stil ändern wollen. Ich schlage Ihnen daher vor, eine Klasse hinzuzufügen, anstatt CSS mit jQuery zu ändern, 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 ersteren besteht darin, dass Sie das CSS verwenden können, wenn Sie etwas CSS onclickvon etwas hinzufügen und dieses CSS beim zweiten Klick entfernen möchten.toggleClass('custom-class')

Wenn Sie im vorherigen Beispiel alle CSS mit unterschiedlichen Werten festlegen müssen, die Sie zuvor festgelegt haben, ist dies kompliziert. Daher ist die Verwendung der Klassenoption eine bessere Lösung.

Sie können verwenden

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

Am besten verwenden Sie $ ('selector'). AddClass ('custom-class') und

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