foi de stil de comutare cu ajutorul jquery

jQuery este mult mai ușor de manipulare DOM, și ne permite să schimbe orice element de pe pagina cu ușurință. Unul dintre aceste elemente este responsabil pentru foi de stil în cascadă, și cu ajutorul jQuery, putem trece acum între stilul folosit. Singura întrebare este, de ce avem nevoie?

Pentru acest lucru poate fi de mai multe motive, și, adesea, motivul cel mai fundamental este importanța accesibilității. Multe site-uri permit utilizatorilor să aleagă dimensiunea fontului, dar este important să ne amintim că, dacă modificați dimensiunea fontului a întregii pagini, apoi du-te tot aspectul și site-ul tau va arata ca o mizerie. Aveți posibilitatea să atașați o oportunitate de a schimba fonturile numai în anumite elemente pe care le dau încrederea că modelul nu-și pierde structura sa.

Ce se întâmplă dacă site-ul dvs. va fi o varietate de culori, iar vizitatorii preferă să utilizeze numai versiunea negru sau doar alb site-ul dvs.? Puteți să-l oferi acestora.

Puteți avea chiar și unele distractiv cu stiluri și schimba complet aspectul site-ul dvs. cu ajutorul DOM-elemente care permit utilizatorilor să selecteze este utilizat un șablon.

Prin simpla schimbare a Cascading Style Sheets pot face o mulțime de lucruri, astfel că în articolul de astăzi noastre, vă vom arăta stiluri rapide și simple de schimbare folosind jQuery.

Pagina demo vă permite să comutați între 4 stiluri diferite doar printr-un clic pe butonul. Puteți descărca, de asemenea, o pagină demo și să-l utilizați pentru propriile lor nevoi.

Acum vom folosi jQuery pentru a schimba elementul switch_style href-parametru.

Pentru început, ne-am stabilit funcția gata, care va fi rulat după pagina este complet încărcat, acesta va rula funcția switch_style_click care stabilește clic-evenimente în blocuri.

Din moment ce am stabilit o clasă pentru toate blocurile, putem profita de acest eveniment și atașați la fiecare element prin caseta de clasă. Tot ce rămâne de făcut este de a obtine ID-ul de bloc, utilizând funcția Attr și depozitați-l într-o variabilă. Acum vom folosi din nou funcția Attr împotriva articolului switch_style pentru a schimba href nou CSS-fișier.

Copiați și inserați următorul cod în fișierul j # 097; vascript.

Acum puteți trece cu ușurință între diferite stiluri.