Превключи на стилове с помощта на JQuery

JQuery е много по-лесно DOM манипулация, и това ни дава възможност да се промени и да е елемент на страницата, с лекота. Един от тези елементи е отговорен за Cascading Style Sheets, и с помощта на JQuery, сега можем да превключвате между стила, използван. Единственият въпрос е, за какво са ни?

Към това може да бъде няколко причини, а често и най-основната причина за това е, че е важно достъпност. Много сайтове позволяват на потребителите да избират размера на шрифта, но е важно да се помни, че ако промените размера на шрифта на цялата страница, а след това отидете на всички оформлението и вашия сайт ще изглежда като каша. Можете да прикачите възможност да промените шрифтовете само в някои елементи, които ви дават увереност, че моделът не губи своята структура.

Какво става, ако вашия сайт ще бъде най-различни цветове, а посетителите предпочитат да използват само черно или само бяло версия на своя уеб сайт? Можете да го предложи за тях.

Можете дори да се позабавляваме с стиловете и напълно да промени външния вид на вашия сайт с помощта на DOM-елементи, които позволяват на потребителите да избират се използва шаблон.

Чрез просто промяна на Cascading Style Sheets може да направи много неща, така че в нашата днешна статия, ние ще ви покажем бърз и прости стилове промени с помощта на JQuery.

Страницата с демо ви позволява да превключвате между 4 различни стилове само с натискане на бутон. Можете също да изтеглите демо страница, и да я използват за собствените си нужди.

Сега ние използваме JQuery да промените switch_style елемент HREF-параметър.

Да започнем с това, ние се готов функция, която ще се проведе след като страницата се зареди напълно, тя ще върви switch_style_click функция, която определя с кликвания събития в блоковете.

Тъй като ние сме създали една класа за всички блокове, ние можем да се възползваме от това събитие и да приложат към всеки елемент чрез избирателните клас. Всичко, което остава да направите, е да получите блок идентификатор с помощта на функцията ATTR и да го съхранява в променлива. Сега ние отново използвате функцията ATTR срещу switch_style елемент, за да се промени HREF нов CSS-файл.

Копирайте и поставете следния код във файла й # 097; vascript.

Сега можете лесно да превключвате между различни стилове.