Wie kann ich mehrere CSS-Attribute in jQuery effizient definieren?

Definition mehrerer CSS-Attribute in jQuery

Während die Möglichkeit, mehrere CSS-Attribute in einer einzigen Zeile zu definieren, in jQuery unterstützt wird, kann dies zu Problemen führen zu Lesbarkeitsproblemen. Die jQuery-API bietet zwei alternative Ansätze.

DOM-Notation

jQuery versteht sowohl die DOM- als auch die CSS-Notation für Eigenschaftsnamen. In der DOM-Notation können mit Bindestrich versehene Eigenschaften (z. B. „Hintergrundfarbe“) ohne Anführungszeichen geschrieben werden:

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

Objektliteral

Um mehrere CSS-Attribute zu definieren, Verwenden Sie ein Objektliteral als Argument für .css() Methode:

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

Empfehlungen

Es wird empfohlen, die Methoden .addClass() und .removeClass() für die Stilverwaltung zu verwenden, auch mit einem einzelnen Attribut. Dies gewährleistet Wartbarkeit und Lesbarkeit. Wenn jedoch mehrere CSS-Eigenschaftszuweisungen erforderlich sind, ist der objektliterale Ansatz dem Aneinanderreihen von Eigenschaften in mehreren .css()-Aufrufen vorzuziehen.

Hinweis:

Denken Sie daran, alle Eigenschaftsnamen, die einen Bindestrich enthalten, in Anführungszeichen zu setzen, wenn Sie die CSS-Notation verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrere CSS-Attribute in jQuery effizient definieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!