Zusammenfassung der JQuery-Methoden zum Betrieb von CSS-Stilen, -Positionen und -Größen

1. CSS

1. CSS(Name)

Greifen Sie auf das Stilattribut des ersten passenden Elements zu.
Rückgabewert String
Parameter
name (String): Der Name des Attributs, auf das zugegriffen werden soll
Beispiel:

Code kopieren Der Code lautet wie folgt:

$("p").css("color"); //Den Wert des Farbstilattributs des ersten Absatzes abrufen 

2. CSS(Eigenschaften)

Legen Sie ein Name/Wert-Paarobjekt als Stilattribut aller übereinstimmenden Elemente fest. Dies ist die beste Möglichkeit, eine große Anzahl von Stileigenschaften für alle passenden Elemente festzulegen.
Rückgabewert jQuery
Parameter
Eigenschaften (Zuordnung): Name/Wert-Paare, die als Stileigenschaften festgelegt werden sollen
Beispiel:

Code kopieren Der Code lautet wie folgt:

//1 Setze die Schriftfarbe aller Absätze auf Rot und den Hintergrund auf Blau 

$("p").css({ color: "#ff0011", Hintergrund: "blue" });
//2 Wenn der Attributname „-“ enthält, müssen Anführungszeichen 
 verwendet werden
$("p").css({ "margin-left": "10px", "background-color": "blue" });

3. CSS(Name,Wert)

Legen Sie den Wert eines Stilattributs für alle übereinstimmenden Elemente fest. Zahlen werden automatisch in Pixelwerte umgewandelt

Rückgabewert jQuery

Parameter

Name (Wert): Attributname

Wert (String, Zahl): Attributwert

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("p").css("color","red"); //Setzen Sie die Schriftart aller Absätze auf Rot

2. Standort

1. offset()

Ermitteln Sie den relativen Versatz des passenden Elements im aktuellen Ansichtsfenster. Das zurückgegebene Objekt enthält zwei ganzzahlige Eigenschaften: top und left.

Hinweis: Diese Methode funktioniert nur bei sichtbaren Elementen.

Rückgabewert Object{top,left}
Beispiel:

Code kopieren Der Code lautet wie folgt:

//Den Offset des zweiten Segments abrufen
Dokumentfragment:

Hallo

2. Absatz

*/
var p = $("p:last"); var offset = p.offset();
p.html("left: " offset.left ", top: " offset.top);

2. position()

Ermitteln Sie den Offset des passenden Elements relativ zum übergeordneten Element. Das zurückgegebene Objekt enthält zwei ganzzahlige Eigenschaften: top und left. Für genaue Berechnungen verwenden Sie Pixeleinheiten für Füll-, Rahmen- und Fülleigenschaften. Diese Methode funktioniert nur bei sichtbaren Elementen. Rückgabewert Object{top,left}

Beispiel:

Code kopieren

Der Code lautet wie folgt: /* //Den Offset des ersten Absatzes abrufen

Dokumentfragment:

Hallo

2. Absatz

var p = $("p:first");
var position = p.position(); 

$("p:last").html("left: " position.left ", top: " position.top);

3. scrollTop() 

Ermitteln Sie den Versatz des übereinstimmenden Elements relativ zum oberen Rand der Bildlaufleiste.

Hinweis: Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. Rückgabewert Ganzzahl

Beispiel:

Code kopieren

Der Code lautet wie folgt:

/* //Den Versatz des ersten Segments relativ zum oberen Rand der Bildlaufleiste abrufen Dokumentfragment:

Hallo

2. Absatz

*/ var p = $("p:first"); $("p:last").text("scrollTop:" p.scrollTop());

4. scrollTop(val) 

Wenn Sie einen Parameterwert übergeben, legen Sie den oberen Versatz der Bildlaufleiste auf diesen Wert fest. Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. 

Rückgabewert jQuery 

Beispiel:

Code kopieren

Der Code lautet wie folgt:

$("div.demo").scrollTop(300);

5. scrollLeft()

Ermitteln Sie den Versatz des übereinstimmenden Elements relativ zur linken Seite der Bildlaufleiste. Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente.
Rückgabewert Ganzzahl
Beispiel:

Code kopieren Der Code lautet wie folgt:

/*
//Ermitteln Sie den Versatz des ersten Segments relativ zur linken Seite der Bildlaufleiste
Dokumentfragment:

Hallo

2. Absatz

*/
var p = $("p:first"); $("p:last").text("scrollLeft:" p.scrollLeft());

6. scrollLeft(val)

Wenn Sie einen Parameterwert übergeben, legen Sie den linken Versatz der Bildlaufleiste auf diesen Wert fest. Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. Rückgabewert jQuery

Beispiel:

Code kopieren Der Code lautet wie folgt: $("div.demo").scrollLeft(300);

3. Größe

1. height()

Rufen Sie den aktuell berechneten Höhenwert (px) des ersten passenden Elements ab. Nach jQuery 1.2 kann es verwendet werden, um die Höhe von Fenster und Dokument zu ermitteln Rückgabewert Ganzzahl

Beispiel:

Code kopieren Der Code lautet wie folgt: /*

//Ermitteln Sie die Höhe des ersten Absatzes

Dokumentfragment:

Hallo

2. Absatz

*/
alarm($("p").height());
//Ermitteln Sie die Höhe des Dokuments
alarm($(document).height());

2. Höhe(Wert)

Legt den Wert der CSS-Eigenschaft „Höhe“ (Hidth) für jedes übereinstimmende Element fest. Wenn die Einheit nicht explizit angegeben ist (z. B. em oder %), wird px verwendet. Wenn die Einheit nicht explizit angegeben ist (z. B. em oder %), wird px verwendet. Rückgabewert jQuery Parameter

val (String, Number): Legen Sie den Wert von „height“ in CSS

fest Beispiel:

Code kopieren

Der Code lautet wie folgt: /* //Setzen Sie die Höhe aller Absätze auf 20

Dokumentfragment:

Hallo

2. Absatz

$("p").height(20);
alarm($("p").height()); 

3. width()

Ermitteln Sie den aktuell berechneten Breitenwert (px) des ersten passenden Elements. Nach jQuery 1.2 kann es verwendet werden, um die Breite von Fenster und Dokument zu ermitteln Rückgabewert Ganzzahl

Beispiel: 0

Code kopieren

Der Code lautet wie folgt: /* //Ermitteln Sie die Breite des ersten Absatzes Dokumentfragment:

Hallo

2. Absatz

*/ alarm($("p").width());

4. Breite(Wert) 

Legt den Wert der CSS-Eigenschaft „Breite“ für jedes übereinstimmende Element fest. Wenn die Einheit nicht explizit angegeben ist (z. B. em oder %), wird px verwendet.

Rückgabewert jQuery Parameter

val (String, Number): Legen Sie den CSS-Eigenschaftswert „width“ fest Beispiel:

Code kopieren

Der Code lautet wie folgt:

/* //Setzen Sie die Breite aller Absätze auf 20 Dokumentfragment:

Hallo

2. Absatz

*/ $("p").width(20); alarm($("p").width());

5. innerHeight() 

Ermitteln Sie die Höhe des Innenbereichs des ersten passenden Elements (einschließlich Polsterung und ohne Ränder). Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. 

Rückgabewert Ganzzahl 

Beispiel:

Code kopieren

Der Code lautet wie folgt:

/* // Ermitteln Sie die Höhe des internen Bereichs des ersten Absatzes Dokumentfragment:

Hallo

2. Absatz

*/ var p = $("p:first"); $("p:last").text("innerHeight:" p.innerHeight());

7. innerWidth()

Ermitteln Sie die Breite des internen Bereichs des ersten passenden Elements (einschließlich Polsterung und ohne Ränder). Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente.
Rückgabewert Ganzzahl
Beispiel:

Code kopieren Der Code lautet wie folgt:

/*
//Ermitteln Sie die Breite des internen Bereichs des ersten Absatzes
Dokumentfragment:

Hallo

2. Absatz

*/
var p = $("p:first"); $("p:last").text("innerWidth:" p.innerWidth());

7. äußere Höhe (Optionen)

Ermitteln Sie die äußere Höhe des ersten passenden Elements (Standard umfasst Abstand und Rand). Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. Rückgabewert Ganzzahl

Parameter

options(Boolean): (false) Wenn auf true gesetzt, werden Margen in die Berechnung einbezogen.
Beispiel:

Code kopieren Der Code lautet wie folgt: /*

//Ermitteln Sie die äußere Höhe des ersten Absatzes

Dokumentfragment:

Hallo

2. Absatz

*/
var p = $("p:first"); $("p:last").text("outerHeight:" p.outerHeight() " , äußereHeight(true):" p.outerHeight(true));

8. äußereHöhe(Optionen)

Ermitteln Sie die äußere Breite des ersten passenden Elements (Standard umfasst Abstand und Rand). Diese Methode funktioniert sowohl für sichtbare als auch für verborgene Elemente. Rückgabewert Ganzzahl

Parameter options(Boolean): (false) Wenn auf true gesetzt, werden Margen in die Berechnung einbezogen. Beispiel:

Code kopieren

Der Code lautet wie folgt: /* //Ermitteln Sie die äußere Breite des ersten Absatzes Dokumentfragment:

Hallo

2. Absatz

*/ var p = $("p:first"); $("p:last").text("outerWidth:" p.outerWidth() " , äußereWidth(true):" p.outerWidth(true));

Das Obige ist der gesamte Inhalt der CSS-Stile, -Positionen und -Größen von jQuery. Wenn es Auslassungen oder Fehler gibt, teilen Sie uns dies bitte mit. 

Zusammenfassung der JQuery-Methoden zum Betrieb von CSS-Stilen, -Positionen und -Größen_jquery