jQuery => CSS-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.

Legen Sie die CSS-Eigenschaft fest

Nur einen Stil festlegen:

$('#target-element').css('color', '#000000');

Mehrere Stile gleichzeitig einstellen:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

CSS-Eigenschaft abrufen

Um die CSS-Eigenschaft eines Elements abzurufen, können Sie die Methode .css(propertyName) verwenden:

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

Numerische Eigenschaften für Inkrement / Dekrement

Numerische CSS-Eigenschaften können mit der Syntax += und -= mit der Methode .css() erhöht bzw. dekrementiert werden:

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - Getter und Setter

CSS-Getter

Die .css() Getter - Funktion kann auf der Seite wie folgt zu jedem DOM - Elemente angewandt werden:

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

Diese Zeile gibt die berechnete Breite des angegebenen Elements zurück. Jede CSS-Eigenschaft, die Sie in Klammern angeben, liefert den Wert der Eigenschaft für dieses $("selector") DOM-Element, wenn Sie nach einem CSS-Attribut fragen, das Sie nicht enthalten wird als Antwort undefined .

Sie können den CSS-Getter auch mit einem Array von Attributen aufrufen:

$("body").css(["animation","width"]);

Dadurch wird ein Objekt aller Attribute mit ihren Werten zurückgegeben:

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

CSS Setter

Die Setter- Methode .css() kann auch auf jedes DOM-Element auf der Seite angewendet werden.

$("selector").css("width", 500);

Diese Anweisung setzt die width von $("selector") auf 500px und gibt das jQuery-Objekt zurück, damit Sie mehr Methoden an den angegebenen Selector ketten können.

Der .css() Setter kann auch verwendet werden, indem ein Object mit CSS-Eigenschaften und Werten übergeben wird, wie:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

Alle Änderungen der Setter gemacht angehängt werden , auf das DOM - Element - style Eigenschaft somit die Elemente Stile beeinflussen (es sei denn , dass Stil - Wert bereits definiert als !important woanders in Stile).

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

jQuery
CSS-Manipulation

Suche…