У цій статті розглянемо методи, які використовуються для CSS-стилів.
Отже, щоб додати якому-небудь елементу стиль, необхідно скористатися таким методом:
Дана інструкція обведе div синьою рамкою.
Як параметри тут використовуються назви і значення, які застосовуються в CSS: background, border, font-style, color і т.д.
Якщо необхідно задати для елемента кілька CSS-правил, то краще використовувати наступну конструкцію:
Дана інструкція обведе div синьою рамкою, зробить фон червоним, а текст - жирним.
Зверніть увагу, що для складені властивостей CSS начебто font-weight і background-color використовуються ІЕ еквіваленти з JS: fontWeight, backgroundColor і т.д.
Перерахуємо інші методи для роботи зі стилями:
Дана інструкція додасть клас main до останнього елемента параграфа.
Дана інструкція видалить клас main з усіх парних параграфів.
Дана інструкція видалить клас main з усіх параграфів, якщо він присутній. І додасть цей клас, якщо він відсутній.
Дана інструкція дозволяє отримати відступи зліва і зверху для елемента. Щоб отримати значення конкретного властивості, потрібно використовувати такі властивості: offset.left для відступу зліва і offset.top - для відступу зверху.
Дана інструкція дозволяє отримати (перший рядок) і задати (другий рядок) висоту елемента.
Дана інструкція дозволяє отримати (перший рядок) і задати (другий рядок) ширину елемента.
Ще приклад:
var widDiv = $ ( "div"). width (); $ ( "Div.fir"). Width (300);
Перший рядок запише в змінну widDiv значення ширини першого div-а. Друга інструкція задасть div-ам класу fir ширину в 300 пікселів.
Це дуже цікава особливість методів jQuery: вони використовуються, як для завдання параметрів (коли приймаються 2 аргументу), так і для отримання значень цих параметрів (якщо передається один аргумент).
Давайте, використовуючи отримані знання зробимо меню з вкладками, ось такого виду (поклацати по вкладках):
jQuery - CSS
вкладка 1
вкладка 2
вкладка 3
вкладка 4
Отже, html-код сторінки наступний:
Як видно, всі вкладки мають єдиний стиль, який визначається класом vkl, а виділена вкладка має клас selected.
Зовнішній вигляд пропишемо на сторінці style.css
Залишилося найцікавіше, а саме функція chang ():
Отже, як же працює ця функція? Спочатку шукається елемент, який має клас selected, і цей клас у нього забирається. Потім (другий рядок) виділеному елементу (він знаходиться по id, переданому в функцію як параметр s) додається клас selected. Ось так все просто.
У наступному уроці дізнаємося, як за допомогою jQuery вставляти цілі шматки html-коду на сторінку і маніпулювати ними.