Speichern Sie diese Seite, um die folgenden Beispiele zu testen.

Die jQuery-Bibliothek bietet eine Reihe praktischer, spezialisierter Methoden, die die Arbeit damit erleichtern CSS-Stile. Eine der am weitesten verbreiteten Methoden dieser Art ist css()-Methode, kurze Beschreibung was in der folgenden Tabelle dargestellt ist:

Wenn Sie Eigenschaftswerte mit der Methode css() lesen, erhalten Sie den Eigenschaftswert, den das erste der im jQuery-Objekt enthaltenen Elemente hat. Wenn Sie eine Eigenschaft festlegen, wird die von Ihnen vorgenommene Änderung gleichzeitig auf alle Elemente des Satzes angewendet. Nachfolgend finden Sie ein Beispiel für die einfachste Verwendung der Methode css():

$(function() ( var sizeVal = $("label").css("font-size"); console.log("Font size: " + sizeVal); $("label").css("font- Größe", "1,5em"); ));

In diesem Skript wählen wir alle Beschriftungselemente aus, rufen den Wert der Eigenschaft „font-size“ mit der Methode css() ab und geben ihn auf der Konsole aus. Anschließend wählen wir erneut alle Beschriftungselemente aus und weisen allen Elementen einen neuen Wert derselben Eigenschaft zu.

Trotz der Tatsache, dass das Skript den tatsächlichen Namen der Eigenschaft (Schriftgröße) verwendet und nicht deren Schreibweise, bei der die Groß- und Kleinschreibung beachtet wird, d. h. Wenn Sie die Eingabemaske verwenden, in der diese Eigenschaft im HTMLElement-Objekt definiert ist (die Eigenschaft „fontSize“), wird sie auch korrekt akzeptiert, da jQuery beide Optionen unterstützt.

Als Ergebnis der Ausführung dieses Skripts wird das folgende Ergebnis auf der Konsole angezeigt:

Das Festlegen einer Eigenschaft auf die leere Zeichenfolge („“) entspricht dem Entfernen dieser Eigenschaft aus dem Stilattribut des Elements.

Mehrere CSS-Eigenschaften gleichzeitig festlegen

Es gibt zwei Möglichkeiten, mehrere CSS-Eigenschaften gleichzeitig festzulegen. Die erste besteht darin, eine Kette von Aufrufen der Methode css() zu bilden, wie unten gezeigt:

$(function() ( $("label").css("font-size", "1.5em").css("color", "blue"); ));

Dieses Skript legt die Eigenschaften für Schriftgröße und Farbe fest. Der gleiche Effekt kann mit einem Anzeigeobjekt erzielt werden, wie im folgenden Beispiel gezeigt:

$(function() ( var cssVals = ("font-size": "1.5em", "color": "blue" ); $("label").css(cssVals); ));

Beide Szenarien führen zum gleichen Ergebnis, wie in der Abbildung dargestellt:

Relative Werte festlegen

Die Methode css() kann auch relative Werte als Argumente annehmen. Dabei handelt es sich um numerische Werte, denen die Zeichen += und -= vorangestellt sind und die zum aktuellen Wert addiert oder davon subtrahiert werden. Diese Technik kann nur für numerische Werte verwendet werden. Nachfolgend finden Sie ein entsprechendes Beispiel:

$(function() ( $("label:odd").css("font-size", "+=5") $("label:even").css("font-size", "-=5 ") ));

Relative Werte werden in denselben Einheiten ausgedrückt wie Eigenschaftswerte. In diesem Fall wird die Schriftgröße für ungerade Beschriftungselemente um 5 Pixel erhöht und für gerade Beschriftungselemente um den gleichen Betrag verringert. Das Ergebnis ist in der Abbildung dargestellt:

Festlegen von Eigenschaften mithilfe einer Funktion

Sie können Eigenschaftswerte dynamisch festlegen, indem Sie eine Funktion an die Methode css() übergeben. Nachfolgend finden Sie ein entsprechendes Beispiel:

$(function() ( $("label").css("border", function(index, currentValue) ( ​​​​if ($(this).closest("#row1").length > 0) ( return " dickes, durchgehendes Rot“; ) else if (index % 2 == 1) ( return „dickes, doppeltes Blau“; ) )); ));

Die an die Funktion übergebenen Argumente sind der Index des Elements in der Menge und der aktuelle Wert der Eigenschaft. Die Variable this verweist auf das HTMLElement-Objekt, das dem Element entspricht, und die Funktion gibt den festzulegenden Wert zurück.

Verwendung spezieller Methoden zum Arbeiten mit CSS-Eigenschaften

Zusätzlich zur css()-Methode definiert jQuery eine Reihe spezialisierter Methoden zum Abrufen oder Festlegen der Werte bestimmter Eigenschaften. Eine Liste dieser Methoden finden Sie in der folgenden Tabelle:

Methoden zum Arbeiten mit bestimmten CSS-Eigenschaften

Verfahren	Beschreibung
Höhe()	Gibt die Höhe (in Pixel) des ersten Elements zurück, das in einem jQuery-Objekt enthalten ist
Höhe (Wert)	Legt die Höhe aller in einem jQuery-Objekt enthaltenen Elemente fest
innerHeight()	Gibt die intrinsische Höhe (d. h. die Höhe eines Elements, einschließlich Auffüllung, aber ohne Ränder und Ränder) des ersten Elements zurück, das in einem jQuery-Objekt enthalten ist
innerWidth()	Gibt die intrinsische Breite (d. h. die Breite des Elements, einschließlich Auffüllung, aber ohne Ränder und Ränder) des ersten Elements zurück, das in einem jQuery-Objekt enthalten ist
offset()	Gibt die Koordinaten des ersten der in einem jQuery-Objekt enthaltenen Elemente relativ zum Anfang des Dokuments zurück
äußereHöhe(boolean_value)	Gibt die Höhe des ersten Elements zurück, das in einem jQuery-Objekt enthalten ist, einschließlich Abstand und Rand. Das Argument bestimmt, ob in diesem Fall die Größe der Felder berücksichtigt werden soll
äußereWidth(boolean_value)	Ruft die Breite des ersten Elements ab, das in einem jQuery-Objekt enthalten ist, einschließlich Abstand und Rahmen. Das Argument bestimmt, ob in diesem Fall die Größe der Felder berücksichtigt werden soll
Position()	Gibt die Koordinaten des ersten in einem jQuery-Objekt enthaltenen Elements relativ dazu zurück übergeordnetes Element, für die ein Positionierungstyp angegeben ist
scrollLeft(), scrollTop()	Ruft den linken oder oberen Scroll-Auffüllwert für das erste der in einem jQuery-Objekt enthaltenen Elemente ab
scrollLeft(Wert), scrollTop(Wert)	Legt den linken oder oberen Bildlaufabstandswert für alle in einem jQuery-Objekt enthaltenen Elemente fest
Breite()	Ruft die Breite des ersten Elements ab, das in einem jQuery-Objekt enthalten ist
Breite (Wert)	Legt die Breite für alle in einem jQuery-Objekt enthaltenen Elemente fest
Höhe(Funktion), Breite(Funktion)	Legt mithilfe der Funktion die Höhe oder Breite aller in einem jQuery-Objekt enthaltenen Elemente fest

Die Namen der meisten dieser Methoden sind selbsterklärend, einige erfordern jedoch eine zusätzliche Erklärung. Methoden offset() Und Position() Gibt ein Objekt mit Eigenschaften zurück Spitze Und links, die die Position des Elements angeben. Nachfolgend finden Sie ein Beispiel für die Verwendung der Methode position().

Schauen wir uns das Hinzufügen von Eigenschaften anhand einiger Beispiele an. CSS zur Site-Seite mit jQuery. Schauen wir uns die Vor- und Nachteile der beiden wichtigsten Möglichkeiten zum Ändern von Stilen auf einer Seite an.

So ändern Sie Seiteninhaltseinstellungen mithilfe der jQuery-Bibliothek für JavaScript können Sie zwei Methoden verwenden:

1. Einzelne Eigenschaften ändern

Lassen Sie uns Elemente mit Eigenschaften ändern Klasse eins Und .Klasse-zwei wenn Sie mit der Maus über ein Element mit einer Klasse fahren .Webseite.

$(".site"). Mouseover(Funktion()( $(".class-one, .class-two") . css ("width" , "30%" ); $(".class-one, .class-two") . css("height", "240px"); } ) ;

Klassenwechsel

Diese Methode ist vorzuziehen und praktischer, wenn Sie viele verschiedene Eigenschaften mit jQuery ändern müssen. Wenn alle diese Eigenschaften in geschrieben sind js-Datei, dann können Sie die Lesbarkeit und das Verständnis des gesamten Codes erheblich erschweren. Es ist besser, alle Stile in eine CSS-Datei zu schreiben und sie mit jQuery zu ändern.

Wenn ein Ereignis eintritt, ändern wir den Stil .Klasse-einsüber Stile .Klasse-eins .Klasse-zwei:

$(".site"). on ("mouseover Mousemove", Funktion () ( $(".class-one"). RemoveClass(). addClass("Klasse-eins, Klasse-zwei"); } ) ;

Wenn Sie sich den obigen Code genau ansehen, fragen Sie sich vielleicht, warum wir die Klasse entfernen Klasse eins und dann geben wir es zusammen mit dem anderen zurück.

Dies ist notwendig, da dies in diesem Kodex festgelegt wurde .Klasse-eins Verwenden Sie es als „Verknüpfung“, damit Sie dieses Element in Zukunft verarbeiten können, ohne sich daran zu erinnern, welche neue Klasse es hat.

Gibt die CSS-Werte ausgewählter Seitenelemente zurück oder ändert sie. Die Funktion hat vier Verwendungszwecke:

gibt den CSS-Wert zurück Stilname am ausgewählten Element. Werden mehrere Elemente ausgewählt, wird der Wert vom ersten übernommen.

CSS-Wert Stilname wird der Wert zugewiesen Wert, für alle ausgewählten Elemente.

Gruppe von CSS-Werten Stilname1, Stilname2, ... Werte werden zugewiesen Wert1, Wert2, ..., für alle ausgewählten Elemente.

CSS-Wert Stilname wird der von der benutzerdefinierten Funktion zurückgegebene Wert zugewiesen. Die Funktion wird für jedes der ausgewählten Elemente separat aufgerufen. Beim Aufruf werden ihm folgende Parameter übergeben: Index— die Position des Elements in der Menge, Wert– aktueller Wert des CSS-Werts Stilname am Element.

Anwendungsbeispiele:

Kommentar: Es ist wichtig zu beachten, dass Sie mit der Methode .css(styleName) nur die CSS-Werte des ersten Elements von allen ausgewählten erhalten. Wenn Sie die Werte aller Elemente benötigen, sollten Sie Konstrukte wie .map() oder .each() verwenden.

In Aktion

Suchen wir unsere Heimat Erde in der Liste der Planeten und markieren sie grün:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ #list( width:260px; ) .item( width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: # EEEEEE; list-style-type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item"~gt~Merkur~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Erde~lt~/li ~gt~ ~lt~li class="item"~gt~Mars~lt~/li ~gt~ ~lt~li class="item"~gt~Jupiter~lt~/li ~gt ~ ~lt~li class="item"~gt~Satrurn~lt~/li ~gt~ ~lt~li class="item"~gt~Uranus~lt~/li ~gt~ ~lt~li class=" item"~gt~Neptune~lt~/li ~gt~ ~lt~li class="item"~gt~Pluto~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("background-color", function(i,val)( if($(this).text() == "Ground") return "#cceecc"; sonst return val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Mit der jQuery-Bibliothek können Sie die Eigenschaften und Attribute der Elemente einer umschlossenen Menge bearbeiten, indem Sie die ursprünglichen Werte ändern. Sie können neue Eigenschaften festlegen und die Werte der ursprünglichen Eigenschaften abrufen und ändern. Durch Entfernen oder Hinzufügen von Klassen können Sie den Anzeigestil von Elementen dynamisch ändern.

Bearbeiten von Elementeigenschaften und -attributen

1. Eine Klasse hinzufügen und entfernen

1.1. Methode.addClass()

Fügt die angegebene Klasse (oder mehrere Klassen) zu jedem Element der umschlossenen Menge hinzu. Damit diese Methode funktioniert, müssen Sie zunächst einen Stil für die hinzugefügte Klasse erstellen. Die Methode entfernt nicht die alte Klasse, sondern fügt lediglich eine neue hinzu.

AddClass(Klassenname) Klassenname– ein oder mehrere Klassennamen, durch Leerzeichen getrennt. .addClass(Funktion) Funktion - Gibt einen oder mehrere Klassennamen zurück, getrennt durch Leerzeichen, die an bestehende angehängt werden können. Nimmt den Index eines Elements in der Menge als Argument und vorhandener Name

Klassen).

1.2. Methode.removeClass()

Entfernt die angegebenen Klassennamen aus allen Elementen der umschlossenen Menge. Klassenname RemoveClass(Klassenname) .addClass(Funktion)– optionaler Parameter, ein oder mehrere Klassennamen, getrennt durch ein Leerzeichen. Wenn der Klassenname nicht angegeben ist, entfernt die Methode alle vorhandenen Klassen aus den Elementen der Menge. Wenn ein Klassenname angegeben ist, wird nur die angegebene Klasse gelöscht.

.removeClass(Funktion)

– Gibt einen oder mehrere durch Leerzeichen getrennte Klassennamen zurück, die aus vorhandenen entfernt werden sollen. Verwendet als Argument den Index des Elements in der Menge und den alten Namen der Klasse(n).

1.3. Methode.toggleClass() Klassenname Fügt eine oder mehrere Klassen zu jedem Element in der Menge hinzu oder entfernt sie. Jedes Element der verpackten Menge wird separat überprüft. Die Methode fügt den angegebenen Klassennamen hinzu, wenn er nicht im Element vorhanden ist, und entfernt ihn aus den Elementen, in denen er vorhanden ist. Wird verwendet, um die visuelle Darstellung von Elementen umzuschalten. Klassenname ToggleClass(Klassenname) - ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden..toggleClass(Klassenname, boolean) - ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden.- ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden. .addClass(Funktion) boolescher Wert - ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden.– Installiert, fügt die angegebene Klasse hinzu oder entfernt sie. True fügt die Klasse hinzu, False entfernt sie.

.toggleClass(boolean)

– optionaler Parameter, legt fest, ob die Klassen jedes Elements der Menge gewechselt werden. .toggleClass(Funktion, boolean) Klasse für mindestens ein Element in der entsprechenden Menge. Gibt true zurück, wenn mindestens eines der Elemente in der Menge einen gültigen Klassennamen hat, andernfalls false.

HasClass(Klassenname) Klassenname— eine Zeichenfolge mit dem Namen der Klasse, nach der gesucht werden soll.

2. Elementattribute ändern

Die Methode ruft den Attributwert des ersten Elements der Menge ab oder legt einen oder mehrere Attributwerte für die Elemente der Menge fest.

2.1. Methode.attr()

.attr(Attributname) Attributname– Gibt den Attributwert des ersten Elements im umschlossenen Satz zurück. Wenn das Attribut fehlt, wird undefiniert zurückgegeben. Attributname .attr(Attributname, Wert) Bedeutung – eine Zeichenfolge oder Zahl, die als Attributwert für alle Elemente der umschlossenen Menge hinzugefügt wird..attr(Attribute) Attributname Attribute .addClass(Funktion)– Die aus den Objekteigenschaften kopierten Werte werden für alle Elemente der umschlossenen Menge festgelegt.

.attr(Attributname, Funktion)

– Gibt den Namen des Attributs an, für das der angegebene Wert festgelegt wird.

– verwendet als Argumente den Index des Elements in der Menge und den alten Wert des Attributs. Der Rückgabewert wird auf den Wert des Attributs gesetzt. Attributname 2.2. Methode.removeAttr()

Entfernt das angegebene Attribut aus jedem Element der umschlossenen Menge.

RemoveAttr(Attributname)

— eine Zeichenfolge, die das zu löschende Attribut definiert.

3. Elementeigenschaften ändern 3.1. Methode.css() Gibt den berechneten Wert der Stileigenschaft für das erste Element im umschlossenen Satz zurück oder legt eine oder mehrere CSS-Eigenschaften für jedes Element im Satz fest. CSS(Eigenschaftsname) Eigenschaftsname 3.1. Methode.css() .attr(Attributname, Wert)– eine Zeichenfolge mit dem Namen der Eigenschaft, die ihren berechneten Wert für das erste Element der Menge zurückgibt. 3.1. Methode.css().css(Eigenschaftsnamen) .addClass(Funktion) Eigenschaftsnamen – ein Array von Eigenschaften, das deren berechnete Werte für das erste Element der Menge zurückgibt..css(Eigenschaftsname, Wert)

ist eine Zeichenfolge oder Zahl, die als Wert der angegebenen Eigenschaft für alle Elemente der umschlossenen Menge festgelegt wird.

.css(Eigenschaftsname, Funktion)

Gibt die aktuelle Breite für das erste Element in einem Satz zurück oder legt die Breite für jedes Element in einem Satz fest. Die Standardmaßeinheit ist px. Die Methode kann verwendet werden, wenn der erhaltene Wert in mathematischen Berechnungen verwendet wird. Die Abmessungen werden ohne Berücksichtigung von Einzügen und Rahmendicke berechnet, ohne Angabe der Maßeinheit. Wenn Sie die Größe des Browserfensters ändern, können sich die Abmessungen des Elements ändern.

width() Die Methode wird ohne Parameter aufgerufen. Gibt den aktuellen Breitenwert für das erste Element in einer Menge zurück, ohne eine Einheit anzugeben. .attr(Attributname, Wert).width(Wert) .addClass(Funktion)– ein ganzzahliger numerischer Wert oder String-Wert der Breite, der für jedes Element der Menge festgelegt wird.

.width(Funktion)

- Nimmt als Argument den Index des Elements und den alten Wert der Eigenschaft, der Rückgabewert wird für alle Elemente auf die Breite gesetzt.

4.2. Methode.height() .attr(Attributname, Wert) Gibt den aktuellen Höhenwert für das erste Element in einem Satz zurück oder legt die Höhe für jedes Element in einem Satz fest. .addClass(Funktion) Height() Die Methode wird ohne Parameter aufgerufen. Gibt den aktuellen Höhenwert für das erste Element in einem Satz zurück.

.height(Wert)

– ein ganzzahliger numerischer Wert oder ein String-Höhenwert, der für jedes Element der Menge festgelegt wird.

.height(Funktion) .attr(Attributname, Wert)- Nimmt als Argument den Index des Elements und den alten Wert der Eigenschaft, der Rückgabewert wird auf die Höhe aller Elemente gesetzt. .addClass(Funktion)

4.3. Methode.innerWidth()

Gibt die Breite des ersten Elements im umschlossenen Satz zurück, einschließlich Polsterung, oder legt sie für jedes Element des umschlossenen Satzes fest.

InnerWidth() Die Methode wird ohne Parameter aufgerufen. Gibt die aktuelle Innenbreite für das erste Element in einer Menge zurück. .attr(Attributname, Wert).innerWidth(Wert) .addClass(Funktion)– ein ganzzahliger numerischer Wert, der für jedes Element der Menge festgelegt wird.

.innerWidth(Funktion)

4.4. Methode.innerHeight()

OuterWidth(boolean) - ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden.

4.6. Methode.outerHeight()

Gibt die Höhe des ersten Elements in der umschlossenen Menge zurück. Zu diesen Maßen gehören die Dicke des Rahmens und die Breite der Vertiefung.

OuterHeight(boolean) - ein oder mehrere durch Leerzeichen getrennte Klassennamen, die für jedes Element der Menge umgeschaltet werden.– optionaler Wert, wenn auf true gesetzt, wird der Randwert berücksichtigt, andernfalls nicht.

4.7. Methode.offset()

Ruft die aktuellen Koordinaten des ersten Elements ab oder legt die Koordinaten für jedes Element fest. Rückgaben JavaScript-Objekt wobei die Eigenschaften left und top die px-Koordinaten des ersten Elements des umschlossenen Satzes relativ zum Anfang des Dokuments enthalten. Die Methode gilt nur für sichtbare Elemente.

Offset() Die Methode wird ohne Parameter aufgerufen.

4.8. Methode.position()

Gibt ein JavaScript-Objekt mit den Eigenschaften left und top zurück, die die px-Koordinaten des ersten Elements der umschlossenen Menge relativ zum nächstgelegenen übergeordneten Element enthalten. Die Methode gilt nur für sichtbare Elemente.

Position() Die Methode wird ohne Parameter aufgerufen.

Es ist schon lange her, dass ich in meinem Blog Artikel über JQuery veröffentlicht habe. Nein, es gab natürlich Artikel, in denen es verwendet wurde, aber es fungierte dort als Hilfswerkzeug, und in der Zwischenzeit war der Abschnitt „JQuery lernen“ mit Staub bedeckt. Mittlerweile ist es an der Zeit, mit dem interessantesten Teil des Trainings fortzufahren – dem Hinzufügen verschiedener Effekte, was genau der Grund ist, warum viele Menschen damit beginnen, es zu studieren. Und im heutigen Artikel erfahren Sie, wie Sie CSS-Eigenschaften im Handumdrehen ändern.

Bevor wir uns mit den Effekten selbst befassen, werfen wir einen Blick auf das CSS. In früheren Artikeln haben wir uns geändert Aussehen Seiten, indem verschiedene CSS-Klassen hinzugefügt oder entfernt werden, die natürlich zunächst in der CSS-Datei erstellt werden müssen. Typischerweise ist dies der Fall der richtige Weg, weil es die Rolle von CSS bei der Gestaltung der Seite berücksichtigt.

Es kann jedoch vorkommen, dass Sie einen CSS-Stil ändern müssen, der nicht im Stylesheet enthalten ist oder nicht beschrieben werden kann. Für solche Fälle verfügt JQuery über die Methode .css().

Um den Wert einer CSS-Eigenschaft zu erhalten, müssen wir einfach den Eigenschaftsnamen als String übergeben, etwa so. css('backgroundColor') .

Eigenschaften, die aus mehreren Wörtern bestehen, können mit einem Bindestrich geschrieben werden, wie in einer CSS-Datei (Hintergrundfarbe), oder mit einer anderen Schreibweise, wie sie im DOM geschrieben werden (Hintergrundfarbe). Um CSS-Eigenschaften festzulegen, verwendet die Methode .css() zwei Methoden. Die erste Methode besteht aus zwei Parametern, dem Namen der CSS-Eigenschaft und ihrem Wert, getrennt durch Kommas. Die zweite ist eine Karte, die aus Eigenschafts-Wert-Paaren besteht.

Css("property","value") .css((property1: "value1", "property-2": "value2"))

Wir werden die Methode verwenden. css() , genau wie wir .addClass() verwendet haben – wir kombinieren sie mit einem Selektor und binden das Ereignis. Schauen wir uns die Methode .css() anhand eines konkreten Beispiels an. Wir benötigen das folgende HTML-Markup:

Und etwas CSS:

#textbox( Rand: 1 Pixel durchgezogen #000; Hintergrund: #DFECFF; Rand: 20 Pixel automatisch; Textausrichtung: links; Abstand: 10 Pixel; Breite: 400 Pixel; Farbe: #0000a0; Schriftstil: kursiv; klar: beide; )

Als Ergebnis erhalten wir eine Seite wie diese:

Auf der Seite gibt es zwei Schaltflächen – zum Erhöhen und Verkleinern der Schriftart. Im Prinzip können wir hier die im vorherigen Artikel beschriebene Methode .addClass() verwenden, aber komplizieren wir die Aufgabe etwas und stellen wir uns vor, dass wir den Text jedes Mal verkleinern oder vergrößern müssen, wenn die entsprechende Schaltfläche gedrückt wird. Dies kann natürlich durch die Beschreibung einer separaten Klasse für jeden Klick implementiert werden, aber es wird viel einfacher sein, die aktuelle Textgröße zu ermitteln und sie um einen bestimmten Wert zu erhöhen (verringern).

Unser Code beginnt traditionell mit $(document).ready() und einem Button-Event-Handler $("#increase").click() :

$(document).ready(function())( $("#increase").click(function())( )))

Als nächstes kann die Schriftgröße einfach über $(“#textbox”).css("fontSize") ermittelt werden. Der Rückgabewert enthält jedoch sowohl die Zahl als auch die Einheiten, sodass wir jeden Teil in einer eigenen Variablen speichern müssen. Anschließend können wir die Zahl erhöhen und die Einheiten wieder daran anhängen. Außerdem planen wir, das JQuery-Objekt mehr als einmal zu verwenden, daher wäre es eine gute Idee, es auch in einer Variablen zu speichern.

$(document).ready(function() ( $("#increase").click(function() ( var $speech = $("div.speech"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2);

Die erste Zeile innerhalb der Funktion .click() speichert eine Variable mit dem Block #textblock.

Beachten Sie, dass wir das $-Symbol im Namen der $speech-Variablen verwenden. Weil $ ein gültiges Zeichen für ist JavaScript-Variablen, können wir es als Erinnerung daran verwenden, dass diese Variable ein JQuery-Objekt speichert. Die nächste Zeile speichert die Schriftgröße des #textblock-Blocks in einer Variablen – zum Beispiel 12px.

Danach verwenden wir parseFloat() und Slice() . Die Funktion parseFloat() wird verwendet, um String-Werte in numerische (Dezimal-)Werte umzuwandeln. Beispielsweise wird die Zeichenfolge 12 in die Zahl 12 umgewandelt. Wenn die Zeichenfolge mit einem nicht numerischen Zeichen beginnt, gibt parseFloat() NaN zurück, was bedeutet: „Kein numerischer Wert“ ( Keine Zahl).Das zweite Argument der Funktion parseFloat() sorgt dafür, dass die Zahl in einen Dezimalwert umgewandelt wird.

Die Methode .sice() gibt einen Teilstring zurück, der mit beginnt ein bestimmter Charakter Linien. Da der Name der von uns verwendeten Einheiten zwei Zeichen lang ist (px), geben wir an, dass der Teilstring mit den letzten beiden Zeichen des Hauptstrings beginnen muss.

Wir müssen lediglich den resultierenden Wert der Variable „num“ mit 1,4 multiplizieren und dann die Schriftgröße festlegen, indem wir die beiden Variablen „num“ und „unit“ verketten:

$(document).ready(function())( $("#increase").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize" ); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2);

Nachdem Sie nun auf die Schaltfläche „Vergrößern“ geklickt haben, wird der Text im Block vergrößert, wie im dargestellten Screenshot:

Beim nächsten Klick auf die gleiche Schaltfläche wird der Text im Block weiter vergrößert.

Damit die Schaltfläche „Verringern“ funktioniert, teilen wir den Wert der Variablen – num/=1.4 . Und um die Codegröße nicht zu erhöhen, können wir über die Button-Klasse zwei .click()-Ereignishandler zu einem kombinieren. Nachdem wir die Variablen festgelegt haben, können wir dann ganz einfach basierend auf der ID der gedrückten Schaltfläche multiplizieren oder dividieren. So sollte der Code aussehen:

$(document).ready(function())( $("input").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="increase")( num*=1.4; ) else if(this.id=="decrease ") ( num/=1.4; ) $speech.css("fontSize", num + unit ));

Das Obige wurde gegeben einfachstes Beispiel Verwendung der .css()-Methode in der Praxis. Ein weiteres Beispiel für die Verwendung dieser Methode kann gegeben werden.

Menüpunkte trennen

Im Design gibt es häufig eine Technik wie das Teilen von Menüpunkten durch eine vertikale Linie, wobei der erste und letzte Menüpunkt keine Seitenlinie haben sollten.

Für ein solches Menü ist das folgende HTML-Markup erforderlich:

Ul( Listenstil: keine; ) ul li( Listenstil: keine; schweben: links; Hintergrund: #DFECFF; Anzeige: Block; Polsterung: 10 Pixel; Rand rechts: 1 Pixel grau durchgezogen; ) ul li a( Text- Dekoration: keine; Farbe: #000;

So wird unsere Speisekarte aussehen:

Und um das rechte Trennzeichen aus dem letzten Menüpunkt (vierter Punkt) zu entfernen, können Sie diesen Code verwenden:

$(document).ready(function())( $("#menu ul li:last").css("border-right", "none"); ));

Und als Ergebnis erhalten wir dieses Menü:

Wie Sie sehen, ist die Verwendung dieser Methode recht einfach und bequem. Versuchen Sie jedoch, sie nicht zu missbrauchen, sondern verwenden Sie sie nur in Fällen, in denen es nicht möglich ist, den gewünschten Stil zur CSS-Datei hinzuzufügen.