Gestionați stiluri de css folosind jQuery - Vreau un site

Gestionați stiluri CSS cu jQuery

Bună ziua tuturor. Astăzi, așa cum am promis în lecția „controlează vizibilitatea unui obiect folosind jQuery“ uita-te la metodele care sunt folosite pentru a gestiona stilurile CSS folosind jQuery.

Permiteți-mi să vă reamintesc că, cu ajutorul de stiluri putem nu numai pentru a determina apariția unui element pe o pagină web, dar, de asemenea, pentru a controla poziția, arăta și ascunde-l după cum doriți, redimensiona, și mult mai mult. Figurat vorbind, cel care câștigă acces la managementul de stil CSS. care opereaza pagina web! Un jQuery permite utilizatorilor la oferte!

Pentru a adăuga orice element de stil, trebuie să utilizați următoarea metodă: .css (nume, valoare)

Să ne, așa cum nu am fi ajuns prea departe de partea de sus a paginii, schimba stilul din titlul articolului. Asigurați-vă că, de exemplu, culoarea roșie:

În acest exemplu, am selectat elementul identifikatorm id = „title“. care este responsabil pentru afișarea numele site-ului și a adăugat un stil care culoare. Un buton este responsabil pentru utilizarea sau pentru a reveni stilul implicit.
Ca parametri sunt denumiri folosite și valori care se aplică în CSS: fundal, frontieră, font-stil, culoare, etc.

Dacă doriți să ceară un element de mai multe -reguli CSS, apoi utilizați următoarea design-ul este mai bine:

Aceste instrucțiuni vor face albastru anterior culoarea textului de paragraf și greutatea fontului setat la 900.

Vă rugăm să rețineți că pentru proprietățile CSS hard-compus, cum ar fi font-greutate și culoare de fundal sunt utilizate, de asemenea echivalente de numerar ale JvaScript: fontWeight, backgroundColor etc.

Pentru a demonstra metodele de lucru ale altor stiluri pe care le folosesc ajutorul pătratelor multi-colorate, care au servit în mod repetat mă servesc în astfel de lecții ca „controla poziția stratului folosind indexul z“ și „controlează vizibilitatea unui obiect folosind jQuery“.

Permiteți-mi amintesc codul și stiluri pentru a le crea:

$ ( '# Style2'). Faceți clic pe (funcția ()<$("#divRel1> . Div: primul „) removeClass ();>); $ ( '# rstyle2') clic (funcția ().<$("#divRel1> div: în primul rând „) addClass ( 'mare');>) ;.

Acest manual, făcând clic pe butonul „Remove Class“. scoateți clasa din primul element copil conținut în identificatorul id = „divRel1“ și adăugați clasa class = „mare“ după ce faceți clic pe butonul „Add Class.“

Următoarea metodă adaugă clasa specificată la elementul, în cazul în care nu este, sau a elimina această clasă în cazul în care elementul are deja:
.toggleClass (clasă)

Încercați mouse-ul poklikat în domeniul de aplicare al încadrare pătrate colorate. Culoarea de fundal se va schimba alternativ.

A primi (prima linie) și setați lățimea (linia a doua) și înălțimea elementului poate fi un element, respectiv prin metode:
.lățime ()
.lățime (valoare)
.înălțime ()
.înălțime (valoare)

codul prezentat mai sus alege ultimul: element de id ultimul identificator = „divRel1“ și de a folosi modificările comutare, sau a restabili setarea implicită atunci când faceți clic pe un pătrat albastru. Pentru sfaturi în stiluri de proprietate definite: cursor: pointer.

Aceasta este o caracteristică foarte interesantă și importantă a metodelor de jQuery. acestea sunt utilizate atât pentru parametrii de locuri de muncă. și pentru obținerea de valori ale acestor parametri.

Dar asta nu e tot! jQuery face posibilă, dacă este necesar, eliminați fișierul CSS asociat cu pagina HTML și atașați un nou:
$ ( 'Link [media =' ecran ']') attr ( 'href', 'Alternative.css') .;

Încercați să varieze, în funcție de preferințele dumneavoastră, stilul sau codul jQuery. Mă întreb ce vei primi?