Mentse el ezt az oldalt az alábbi példák teszteléséhez.

A jQuery könyvtár számos kényelmes, speciális módszert kínál, amelyek megkönnyítik a munkát CSS stílusok. Az egyik legszélesebb körben alkalmazott ilyen módszer az css() metódus, rövid leírás amely az alábbi táblázatban látható:

Amikor a css() metódussal olvassa be a tulajdonságértékeket, akkor azt a tulajdonságértéket kapja meg, amelyik a jQuery objektumban lévő első elemekkel rendelkezik. Ugyanakkor, amikor beállít egy tulajdonságot, az elvégzett módosítás a halmaz összes elemére vonatkozik. Az alábbiakban egy példa a css() metódus legegyszerűbb használatára:

$(function() ( var sizeVal = $("label").css("font-size"); console.log("Betűméret: " + sizeVal); $("label").css("font- méret", "1,5 em"); ));

Ebben a szkriptben kijelöljük az összes címkeelemet, a css() metódussal megkapjuk a font-size tulajdonság értékét, és kinyomtatjuk a konzolra. Ezután ismét kijelöljük az összes címkeelemet, és minden elemhez hozzárendeljük ugyanazt a tulajdonságot.

Annak ellenére, hogy a szkript a tulajdonság tényleges nevét (font-size) használja, nem pedig a kis- és nagybetűket megkülönböztető jelölést, pl. a beviteli űrlap, amelyben ez a tulajdonság a HTMLElement objektumban van definiálva (a fontSize tulajdonság), ez is helyesen kerül elfogadásra, mivel a jQuery mindkét lehetőséget támogatja.

A szkript futtatásának eredményeként a következő eredmény jelenik meg a konzolon:

Ha egy tulajdonságot az üres karakterláncra ("") állít be, az egyenértékű a tulajdonság eltávolításával az elem stílusattribútumából.

Több CSS-tulajdonság beállítása egyszerre

Kétféleképpen állíthat be egyszerre több CSS-tulajdonságot. Az első a css() metódus hívási láncának létrehozása, az alábbiak szerint:

$(function() ( $("címke").css("betűméret", "1.5em").css("szín", "kék"); ));

Ez a szkript beállítja a betűméretet és a színtulajdonságokat. Ugyanez a hatás érhető el egy megjelenítő objektum használatával, az alábbi példában látható módon:

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

Mindkét forgatókönyv ugyanarra az eredményre vezet, az ábrán látható:

Relatív értékek beállítása

A css() metódus relatív értékeket is felvehet argumentumként. Ezek olyan numerikus értékek, amelyeket += és -= jelek előznek meg, és hozzáadódnak az aktuális értékhez vagy kivonják az aktuális értékből. Ez a technika csak számértékekhez használható. Az alábbiakban egy megfelelő példa látható:

$(function() ( $("címke:páratlan").css("betűméret", "+=5") $("label:even").css("betűméret", "-=5" ") ));

A relatív értékeket az ingatlanértékekkel azonos mértékegységekben fejezzük ki. Ebben az esetben a betűméret 5 képponttal nő a páratlan címkeelemeknél, és ugyanennyivel csökken a párosoknál. Az eredmény az ábrán látható:

Tulajdonságok beállítása függvény segítségével

A tulajdonságértékeket dinamikusan állíthatja be, ha egy függvényt ad át a css() metódusnak. Az alábbiakban egy megfelelő példa látható:

$(function() ( $("label").css("border", function(index, currentValue) (if ($(this).closest("#row1").length > 0) ( return " vastag egyszínű piros"; ) else if (index % 2 == 1) ("vastag dupla kék" visszaadása; ) )); ));

A függvénynek átadott argumentumok a halmazban lévő elem indexe és a tulajdonság aktuális értéke. A this változó az elemnek megfelelő HTMLElement objektumra utal, és a függvény a beállítandó értéket adja vissza.

Speciális módszerek használata a CSS-tulajdonságok kezeléséhez

A css() metóduson kívül a jQuery számos speciális módszert definiál adott tulajdonságok értékeinek lekérésére vagy beállítására. Ezeknek a módszereknek a listája az alábbi táblázatban található:

Meghatározott CSS-tulajdonságokkal való munkavégzés módszerei

Módszer	Leírás
magasság()	A jQuery objektumban található első elem magasságát (pixelben) adja vissza
magasság (érték)	Beállítja a jQuery objektumban található összes elem magasságát
belső magasság()	A jQuery objektumban lévő első elem belső magasságát adja vissza (azaz egy elem magasságát, beleértve a kitöltést is, de nem tartalmazza a szegélyeket és a margókat).
belső szélesség()	Visszaadja a jQuery objektumban lévő első elem belső szélességét (azaz az elem szélességét, beleértve a kitöltést is, de a szegélyek és margók nélkül)
offset()	Egy jQuery objektumban lévő első elem koordinátáit adja vissza a dokumentum elejéhez viszonyítva
külsőmagasság(logikai_érték)	A jQuery objektumban található első elem magasságát adja vissza, beleértve a kitöltést és a szegélyt. Az érv határozza meg, hogy ebben az esetben figyelembe kell-e venni a mezők méretét
külső szélesség(logikai_érték)	Lekéri a jQuery objektumban található első elem szélességét, beleértve a kitöltést és a szegélyt. Az érv határozza meg, hogy ebben az esetben figyelembe kell-e venni a mezők méretét
pozíció()	Egy jQuery objektumban található első elem koordinátáit adja vissza ahhoz képest szülő elem, amelynek pozicionálási típusa van megadva
scrollLeft(), scrollTop()	Lekéri a jQuery objektumban található első elemek bal vagy felső görgető kitöltési értékét
scrollLeft(érték), scrollTop(érték)	Beállítja a bal vagy a felső görgetés kitöltés értékét a jQuery objektumban található összes elemhez
szélesség()	Lekéri a jQuery objektum első elemének szélességét
szélesség (érték)	Beállítja a jQuery objektumban található összes elem szélességét
magasság (függvény), szélesség (függvény)	A függvény segítségével beállítja a jQuery objektumban található összes elem magasságát vagy szélességét

A legtöbb ilyen módszer neve magától értetődő, de néhányuk további magyarázatot igényel. Mód offset()És pozíció() tulajdonságokkal rendelkező objektumot ad vissza tetejéreÉs balra, amelyek az elem helyzetét jelzik. Alább látható egy példa a position() metódus használatára.

Nézzük meg néhány példa segítségével a tulajdonságok hozzáadását. CSS segítségével a webhely oldalára jQuery. Nézzük meg az oldal stílusváltásának két fő módja előnyeit és hátrányait.

Az oldaltartalom beállításainak módosításához a jQuery könyvtár használatával JavaScript, két módszert használhat:

1. Egyedi tulajdonságok megváltoztatása

Változtassuk meg az elemeket tulajdonságokkal osztály-egyÉs .második osztály amikor egy osztállyal rendelkező elem fölé viszi az egérmutatót .weboldal.

$(".site"). egérmutató(függvény()( $(.class-one, .class-two") . css ("width" , "30%" ) ; $(.class-one, .class-two") . css("magasság", "240px"); } ) ;

Változó osztályok

Ez a módszer előnyösebb és kényelmesebb, ha sok különböző tulajdonságot kell módosítania a jQuery használatával. Ha mindezek a tulajdonságok a js fájl, akkor komolyan megnehezítheti a teljes kód olvashatóságát és megértését. Jobb, ha az összes stílust egy CSS-fájlba írja, és a jQuery segítségével módosíthatja őket.

Ha egy esemény bekövetkezik, megváltoztatjuk a stílust .osztály-egy a stílusokon .osztály-egy .osztály-második:

$(".site"). on ("mouseover mousemove" , function () ( $(.class-one"). RemoveClass(). addClass("osztály-egy osztály-kettő"); } ) ;

Ha alaposan megnézi a fenti kódot, felmerülhet, hogy miért távolítjuk el az osztályt osztály-egy majd visszaadjuk a másikkal együtt.

Erre azért van szükség, mert ebben a kódexben úgy döntöttek .osztály-egy használja „parancsikonként”, hogy a jövőben feldolgozhassa ezt az elemet anélkül, hogy emlékezne, milyen új osztálya van.

Visszaadja vagy módosítja a kiválasztott oldalelemek CSS-értékeit. A funkciónak négy felhasználási módja van:

visszaadja a css értéket styleName a kiválasztott elemnél. Ha több elemet választ ki, az érték az elsőből lesz véve.

css-érték styleNameérték lesz hozzárendelve érték, az összes kiválasztott elemhez.

css értékek csoportja stílusnév1, stílusnév2, ...értékek lesznek hozzárendelve érték1, érték2, ..., az összes kiválasztott elemhez.

css-érték styleName a felhasználó által definiált függvény által visszaadott értékhez lesz rendelve. A függvény minden kiválasztott elemhez külön-külön kerül meghívásra. Meghíváskor a következő paraméterek kerülnek átadásra: index— az elem helyzete a készletben, érték— a css érték aktuális értéke styleName az elemnél.

Példák a felhasználásra:

Megjegyzés: Fontos megjegyezni, hogy a .css(styleName) metódussal csak az első elem css értékeit kapja meg az összes kiválasztott közül. Ha szüksége van az összes elem értékére, akkor olyan konstrukciókat kell használnia, mint a .map() vagy az .each() .

In Action

Keressük meg szülőföldünket a bolygók listája között, és jelöljük ki zölddel:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lta EEEEEE list-style-type:none ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li; class="item"~gt~Mercury~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Föld~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"; else return val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

A jQuery könyvtár lehetővé teszi a csomagolt halmaz elemeinek tulajdonságainak és attribútumainak az eredeti értékek megváltoztatásával történő manipulálását. Új tulajdonságokat állíthat be, valamint lekérheti és módosíthatja az eredeti tulajdonságok értékeit. Osztályok eltávolításával vagy hozzáadásával dinamikusan módosíthatja az elemek megjelenítési stílusát.

Az elemek tulajdonságainak és attribútumainak manipulálása

1. Osztály hozzáadása és eltávolítása

1.1. Method.addClass()

Hozzáadja a megadott osztályt (vagy több osztályt) a burkolt halmaz minden eleméhez. Ahhoz, hogy ez a módszer működjön, először létre kell hoznia egy stílust a hozzáadott osztályhoz. A metódus nem távolítja el a régi osztályt, hanem egyszerűen hozzáad egy újat.

AddClass (osztálynév) osztály neve— egy vagy több osztálynév, szóközzel elválasztva. .addClass(függvény) funkció - egy vagy több osztálynevet tér vissza, szóközzel elválasztva, és hozzá kell fűzni a meglévőket. A halmaz egy elemének indexét veszi argumentumnak és meglévő név

osztály(ok).

1.2. Method.removeClass()

Eltávolítja a megadott osztályneveket a becsomagolt halmaz összes eleméből. osztály neve RemoveClass(osztálynév) .addClass(függvény)— opcionális paraméter, egy vagy több osztálynév szóközzel elválasztva. Ha az osztálynév nincs megadva, a metódus eltávolítja az összes létező osztályt a halmaz elemei közül. Ha osztálynév van megadva, csak a megadott osztályt törli.

.removeClass(függvény)

- Egy vagy több osztálynevet tér vissza, szóközzel elválasztva, és el kell távolítani a meglévők közül. A halmazban lévő elem indexét és az osztály(ok) régi nevét veszi argumentumnak.

1.3. Method.toggleClass() osztály neve Hozzáad vagy eltávolít egy vagy több osztályt a készlet minden eleméből. A becsomagolt készlet minden elemét külön ellenőrzik. A metódus hozzáadja a megadott osztálynevet, ha az nem szerepel az elemben, és eltávolítja azokból az elemekből, ahol jelen van. Az elemek vizuális megjelenítésének váltására szolgál. osztály neve ToggleClass(osztálynév) - egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak..toggleClass(osztálynév, logikai érték) - egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak.- egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak. .addClass(függvény) logikai érték - egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak.— telepíti, hozzáadja vagy eltávolítja a megadott osztályt. A True hozzáadja az osztályt, a false eltávolítja.

.toggleClass(boolean)

— opcionális paraméter, beállítja, hogy a halmaz egyes elemeinek osztályai át legyenek kapcsolva. .toggleClass(függvény, logikai érték) osztály legalább egy eleméhez a megfelelő halmazban. Igaz értéket ad vissza, ha a halmaz legalább egyik eleme érvényes osztálynévvel rendelkezik, egyébként false értéket ad vissza.

HasClass (osztály neve) osztály neve— egy karakterlánc a keresendő osztály nevével.

2. Elem attribútumok megváltoztatása

A metódus lekéri a halmaz első elemének attribútumértékét, vagy beállít egy vagy több attribútumértéket a halmaz elemeihez.

2.1. Method.attr()

.attr(attribútum neve) attribútum neve- A burkolt halmaz első elemének attribútumértékét adja vissza. Ha az attribútum hiányzik, undefined értékkel tér vissza. attribútum neve .attr(attribútum neve, értéke) jelentése - egy karakterlánc vagy szám, amely attribútumértékként kerül hozzáadásra a burkolt halmaz összes eleméhez..attr(attribútumok) attribútum neve attribútumokat .addClass(függvény)- az objektum tulajdonságaiból másolt értékek a csomagolt készlet összes elemére be lesznek állítva.

.attr(attribútum neve, függvény)

— annak az attribútumnak a nevét adja meg, amelyhez a megadott érték be lesz állítva.

— argumentumnak veszi a halmazban lévő elem indexét és az attribútum régi értékét. A visszatérési érték az attribútum értéke lesz. attribútum neve 2.2. Method.removeAttr()

Eltávolítja a megadott attribútumot a burkolt készlet minden eleméből.

RemoveAttr(attribútum neve)

— a törölni kívánt attribútumot meghatározó karakterlánc.

3. Az elemek tulajdonságainak megváltoztatása 3.1. Method.css() Visszaadja a stílustulajdonság számított értékét a burkolt készlet első eleméhez, vagy beállít egy vagy több CSS-tulajdonságot a készlet minden eleméhez. Css (tulajdonnév) ingatlan neve 3.1. Method.css() .attr(attribútum neve, értéke)— egy karakterlánc a tulajdonság nevével, visszaadja a halmaz első elemének számított értékét. 3.1. Method.css().css(tulajdonnevek) .addClass(függvény) ingatlannevek — tulajdonságok tömbje, a halmaz első eleméhez tartozó számított értékeket adja vissza..css(tulajdon neve, értéke)

egy karakterlánc vagy szám, amely a megadott tulajdonság értékeként lesz beállítva a burkolt halmaz összes eleméhez.

.css(tulajdonság neve, függvény)

Visszaadja a készlet első elemének aktuális szélességét, vagy beállítja a készlet minden elemének szélességét. Az alapértelmezett mértékegység a px. A módszer akkor használható, ha a kapott értéket matematikai számításokhoz fogják használni. A méretek kiszámítása a bemélyedés és a keretvastagság figyelembevétele nélkül, a mértékegység megadása nélkül történik. A böngészőablak átméretezésekor az elem méretei változhatnak.

Width() A metódus meghívása paraméterek nélkül történik. Egy halmaz első elemének aktuális szélességi értékét adja vissza, mértékegység megadása nélkül. .attr(attribútum neve, értéke).width(érték) .addClass(függvény)- a szélesség egész számértéke vagy karakterlánc-értéke, amely a halmaz minden eleméhez be lesz állítva.

.width(függvény)

- argumentumként veszi az elem indexét és a tulajdonság régi értékét, a visszatérési érték minden elemnél a szélességre lesz állítva.

4.2. Method.height() .attr(attribútum neve, értéke) Egy halmaz első elemének aktuális magasságát adja vissza, vagy beállítja a készlet minden elemének magasságát. .addClass(függvény) Height() A metódus meghívása paraméterek nélkül történik. Egy halmaz első elemének aktuális magasságát adja vissza.

.height(érték)

— egy egész számérték vagy karakterlánc-magasság érték, amely a halmaz minden eleméhez be lesz állítva.

.height(függvény) .attr(attribútum neve, értéke)- argumentumként veszi az elem indexét és a tulajdonság régi értékét, a visszatérési érték az összes elem magasságára lesz beállítva. .addClass(függvény)

4.3. Method.innerWidth()

Visszaadja a burkolt készlet első elemének szélességét, beleértve a kitöltést is, vagy beállítja a csomagolt készlet minden eleméhez.

InnerWidth() A metódus meghívása paraméterek nélkül történik. A készlet első elemének aktuális belső szélességét adja vissza. .attr(attribútum neve, értéke).innerWidth(érték) .addClass(függvény)— egy egész számérték, amely a halmaz minden eleméhez be lesz állítva.

.innerWidth(függvény)

4.4. Method.innerHeight()

Külső szélesség (boolean) - egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak.

4.6. Method.outerHeight()

Adja vissza a becsomagolt készlet első elemének magasságát. Ezek a méretek magukban foglalják a keret vastagságát és a behúzás szélességét.

Külső magasság (boolean) - egy vagy több osztálynév, szóközzel elválasztva, amelyek a készlet minden eleméhez kapcsolódnak.— opcionális érték, ha igaz értékre van állítva, a margin értékét veszi figyelembe, ellenkező esetben nem.

4.7. Method.offset()

Lekéri az első elem aktuális koordinátáit, vagy beállítja az egyes elemek koordinátáit. Visszatér JavaScript objektum a bal és felső tulajdonságokkal, amelyek a burkolt halmaz első elemének px koordinátáit tartalmazzák a dokumentum elejéhez viszonyítva. A módszer csak a látható elemekre vonatkozik.

Offset() A metódus meghívása paraméterek nélkül történik.

4.8. Method.position()

Egy JavaScript objektumot ad vissza, amelynek bal és felső tulajdonsága tartalmazza a burkolt halmaz első elemének px koordinátáit a legközelebbi szülőelemhez viszonyítva. A módszer csak a látható elemekre vonatkozik.

Position() A metódus meghívása paraméterek nélkül történik.

Már régóta nem volt cikk a JQuery-ről a blogomon. Nem, persze voltak olyan cikkek, amelyek ezt használták, de ott segédeszközként működött, és közben a „JQuery tanulása” részt belepte a por. Közben eljött az idő, hogy továbblépjünk a képzés legérdekesebb részéhez - különféle effektusok hozzáadásához, ezért sokan éppen ezért kezdik el tanulni. A mai cikkből pedig megtudhatja, hogyan módosíthatja a CSS tulajdonságait menet közben.

Mielőtt magára az effektusokra térnénk ki, álljunk vissza egy kicsit, és vessünk egy pillantást a CSS-re. A korábbi cikkekben változtattunk megjelenés oldalakat különböző CSS osztályok hozzáadásával vagy eltávolításával, amelyeket először természetesen létre kell hozni a CSS fájlban. Tipikusan ezt a helyes utat, mert figyelembe veszi a CSS szerepét az oldal kialakításában.

Előfordul azonban, hogy módosítania kell egy olyan CSS-stílust, amely nem szerepel a stíluslapon, vagy amelyet nem lehet leírni. Ilyen esetekben a JQuery rendelkezik a .css() metódussal.

Ahhoz, hogy megkapjuk egy CSS tulajdonság értékét, egyszerűen át kell adnunk a tulajdonság nevét karakterláncként, valami ehhez hasonló. css('backgroundColor') .

A több szóból álló tulajdonságok írhatók kötőjellel, mint egy CSS-fájlban (háttérszín), vagy más kis- és nagybetűvel, ahogyan a DOM-ban (backgroundColor) vannak írva. A CSS-tulajdonságok beállításához a .css() metódus két módszert használ. Az első módszer két paraméter, a CSS tulajdonság neve és értéke, vesszővel elválasztva. A második egy tulajdonság-érték párokból álló térkép.

Css("tulajdon","érték") .css((tulajdonság1: "érték1", "tulajdon-2": "érték2"))

A módszert fogjuk használni. css() , csakúgy, mint az .addClass() -t - kombináljuk őket egy szelektorral, és összekapcsoljuk az eseményt. Nézzük meg a .css() metódust egy konkrét példa segítségével. A következő HTML jelölésre lesz szükségünk:

És egy kis CSS:

#textbox(szegély: 1px tömör #000; háttér: #DFECFF; margó: 20px automatikus; szövegigazítás: balra; kitöltés: 10px; szélesség: 400px; szín: #0000a0; betűstílus: dőlt; tiszta: mindkettő; )

Ennek eredményeként egy ehhez hasonló oldalunk lesz:

Az oldalon két gomb található - a betűtípus növelésére és csökkentésére. Itt elvileg használhatjuk az előző cikkben leírt .addClass() metódust, de bonyolítsuk egy kicsit a feladatot, és képzeljük el, hogy a megfelelő gomb minden egyes megnyomására csökkenteni vagy növelni kell a szöveget. Ez természetesen megvalósítható úgy, hogy minden kattintásra külön osztályt írunk le, de sokkal egyszerűbb lesz az aktuális szövegméretet megszerezni és adott értékkel növelni (csökkenteni).

Kódunk hagyományosan $(document).ready()-vel és egy $("#increase").click() gomb eseménykezelővel kezdődik:

$(dokumentum).ready(function())( $("#növelés").click(function())( ))

Ezután a betűméret könnyen beállítható a $(“#textbox”).css("fontSize") segítségével. A visszatérési érték azonban tartalmazza majd a számot és az egységeket is, ezért minden részt a saját változójában kell tárolnunk, ami után növelhetjük a számot és visszacsatolhatjuk hozzá az egységeket. Emellett a JQuery objektumot többször is tervezzük használni, ezért érdemes azt is változóban tárolni.

$(document).ready(function() ( $("#növelés").click(function() ( var $beszéd = $("div.speech"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10 var unit = currentSize.slice(-2)("fontSize", num + unit ));

A .click() függvény első sora egy változót tárol a #textblock blokkal.

Vegye figyelembe, hogy a $ beszédváltozó nevében a $ szimbólumot használjuk. Mert a $ egy érvényes karakter a számára JavaScript változók, használhatjuk emlékeztetőül, hogy ez a változó egy JQuery objektumot tárol. A következő sor a #textblock blokk betűméretét menti el egy változóba - például 12px.

Ezt követően használjuk a parseFloat() és slice() függvényeket. A parseFloat() függvény a karakterlánc-értékek numerikus (tizedes) értékké alakítására szolgál. Például a 12-es karakterlánc 12-es számmá alakul. Ha a karakterlánc nem numerikus karakterrel kezdődik, a parseFloat() NaN-t ad vissza, ami azt jelenti: "Nem numerikus érték" ( Nem szám).A parseFloat() függvény második argumentuma biztosítja, hogy a szám decimális értékké legyen konvertálva.

A .sice() metódus a következővel kezdődő részkarakterláncot adja vissza egy bizonyos karakter vonalak. Mivel az általunk használt egységek neve két karakter hosszú (px), megadjuk, hogy az alsztringnek a fő karakterlánc utolsó két karakterével kell kezdődnie.

Csak annyit kell tennünk, hogy megszorozzuk a num változó eredményül kapott értékét 1,4-gyel, majd beállítjuk a betűméretet a num és unit két változó összefűzésével:

$(dokumentum).ready(function())( $("#növelés").click(function())( var $beszéd = $("#textbox"); var currentSize = $speech.css("fontSize" ); var num = parseFloat(currentSize, 10 var unit = currentSize.slice(-2)("fontSize", num + unit ));

Most, miután a „Nagyítás” gombra kattintott, a blokkban lévő szöveg megnő, mint a bemutatott képernyőképen:

A következő kattintás ugyanerre a gombra tovább növeli a szöveget a blokkban.

Annak érdekében, hogy a „Csökkentés” gomb működjön, elosztjuk a változó értékét – num/=1,4 . És hogy ne növeljük a kód méretét, a gombosztályon keresztül két .click() eseménykezelőt kombinálhatunk egybe. Ezután a változók beállítása után könnyedén szorozhatunk vagy oszthatunk a megnyomott gomb azonosítója alapján. Így kell kinéznie a kódnak:

$(document).ready(function())( $("input").click(function())( var $beszéd = $("#textbox"); var currentSize = $beszéd.css("betűméret") ; var num = parseFloat(currentSize, 10 var unit = currentSize.slice(-2) if (this.id=="növekedés")( szám*=1,4; ) else if(this.id=="csökkentés); ") ( szám/=1,4; ) $speech.css("betűméret", szám + egység ));

A fentiek megadva voltak legegyszerűbb példa a gyakorlatban a .css() metódus használatával. A módszer használatára még egy példát hozhatunk.

Menüpontok elkülönítése

A tervezésben gyakran létezik olyan technika, hogy a menüelemeket függőleges vonallal osztják fel, és az első és az utolsó menüpontban nem szabad oldalvonalat.

Egy ilyen menü a következő HTML-jelölést igényli:

Ul( listastílus: nincs; ) ul li( listastílus: nincs; lebegés: balra; háttér: #DFECFF; kijelző: blokk; kitöltés: 10 képpont; jobb oldali szegély: 1 képpont szürke, szilárd; ) ul li a( text- dekoráció: nincs szín: # 000;

Így fog kinézni az étlapunk:

És a megfelelő elválasztó eltávolításához az utolsó menüpontból (negyedik elem), használhatja ezt a kódot:

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

Ennek eredményeként ezt a menüt kapjuk:

Amint láthatja, ennek a módszernek a használata meglehetősen egyszerű és kényelmes, de próbáljon meg nem visszaélni vele, hanem csak olyan esetekben használja, amikor nem lehetséges a kívánt stílus hozzáadása a CSS-fájlhoz.