Looking for jquery Keywords? Try Ask4Keywords

jQueryCSS-Manipulation


Syntax

  • .css (cssProperty) // Liefert den gerenderten CSS-Eigenschaftswert
  • .css ([cssProperty, ...]) // Werte aus einem Array von cssProperties abrufen
  • .css (cssProperty, value) // Wert setzen
  • .css ({cssProperty: value, ...}) // Eigenschaften und Werte setzen
  • .css (cssProperty, function) // Machen Sie die cssProperty für eine Rückruffunktion verfügbar

Bemerkungen

Gerenderte Werte

Wenn eine responsive Unit verwendet wird (wie "auto" , "%" , "vw" usw.), gibt .css() den tatsächlich gerenderten Wert in px

.myElement{ width: 20%; }
var width = $(".myElement").css("width"); // "123px" 

Eigenschaften und Werte formatieren

Eigenschaften können mit der Standard-CSS-Formatierung als String oder mit camelCase definiert werden

"margin-bottom"
marginBottom

Die Werte sollten in String angegeben werden. Numerische Werte werden von jQuery intern als px Einheiten behandelt

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

Ab jQuery 3 vermeiden Sie die Verwendung von .show() und .hide()

Gemäß diesem Blogeintrag in jQuery sollten Sie aufgrund von Overhead- und Leistungsproblemen nicht länger .show() oder .hide() .

Wenn in einem Stylesheet Elemente festgelegt sind, die display: none , wird die Methode .show() nicht mehr überschrieben. Die wichtigste Regel für den Wechsel zu jQuery 3.0 lautet daher: Verwenden Sie kein Stylesheet, um den Standard für die display: none .show() display: none und versuchen Sie dann, .show() - oder eine beliebige Methode, die Elemente wie .slideDown() und .fadeIn() - um es sichtbar zu machen. Wenn ein Element standardmäßig ausgeblendet werden soll, fügen Sie dem Element am besten einen Klassennamen wie „hidden“ hinzu und definieren Sie die display: none Klasse display: none in einem Stylesheet. Anschließend können Sie diese Klasse mit den .addClass() und .removeClass() von jQuery hinzufügen oder entfernen, um die Sichtbarkeit zu steuern. Alternativ können Sie einen .ready() Handler-Aufruf .hide() für die Elemente aufrufen, bevor sie auf der Seite angezeigt werden. Wenn Sie den Stylesheet-Standard wirklich beibehalten müssen, können Sie .css("display", "block") (oder den entsprechenden Anzeigewert) verwenden, um das Stylesheet zu überschreiben.

CSS-Manipulation Verwandte Beispiele