Збережіть цю сторінку для тестування наведених нижче прикладів.
Бібліотека jQuery надає ряд зручних спеціалізованих методів, що значно спрощують роботу з стилями CSS. Одним з найбільш широко використовуваних методів такого роду є метод css(), короткий описякого наведено в таблиці нижче:
При зчитуванні значень властивостей за допомогою методу css() ви отримуєте значення властивості, яке має перший елемент, що міститься в об'єкті jQuery. У той же час при встановленні властивості зміна застосовується до всіх елементів набору. Приклад найпростішого використання методу css() наведено нижче:
$(function() ( var sizeVal = $("label").css("font-size"); console.log("Розмір шрифту: " + sizeVal); $("label").css("font- size", "1.5em"); ));
У цьому сценарії ми вибираємо всі елементи label, отримуємо за допомогою методу css() значення властивості font-size та виводимо його на консоль. Потім ми знову вибираємо всі елементи label і присвоюємо нове значення цієї властивості всім елементам.
Попри те що у сценарії використовується фактичне ім'я якості (font-size), а чи не його запис із застосуванням регістру, тобто. Форма запису, в якій ця властивість визначена в об'єкті HTMLElement (властивість fontSize), вона також сприймається коректно, оскільки jQuery підтримує обидва варіанти.
В результаті роботи даного сценарію на консоль виводиться наступний результат:
Установка для властивості значення у вигляді порожнього рядка ("") дорівнює видалення цієї властивості з атрибуту style даного елемента.
Встановлення одночасно кількох властивостей CSS
Існують два способи одночасної установки кількох CSS-властивостей. Перший - це формування ланцюжка викликів методу css(), як показано нижче:
$(function() ( $("label").css("font-size", "1.5em").css("color", "blue"); ));
У цьому сценарії встановлюються значення властивостей font-size та color. Того ж ефекту можна досягти, використовуючи об'єкт відображення, як показано на прикладі нижче:
$(function() ( var cssVals = ( "font-size": "1.5em", "color": "blue"); $("label").css(cssVals); ));
Обидва варіанти сценарію призводять до того самого результату, показаному на малюнку:
Встановлення відносних значень
Як аргументи метод css() може набувати також відносних значень. Вони є числові значення, яким передують знаки += і -= і які додаються чи віднімаються з поточного значення. Цей прийом можна використовувати лише щодо числових величин. Відповідний приклад наведено нижче:
$(function() ( $("label:odd").css("font-size", "+=5")) $("label:even").css("font-size", "-=5 ")));
Відносні значення виражаються у тих самих одиницях, як і значення властивостей. У цьому випадку розмір шрифту збільшується на 5 пікселів для непарних елементів label і зменшується на ту саму величину для парних. Результат показаний малюнку:
Встановлення властивостей за допомогою функції
Можна встановлювати значення властивостей динамічно передаючи функцію методу css(). Відповідний приклад наведено нижче:
$(function() ( $("label").css("border", function(index, currentValue) ( if ($(this).closest("#row1").length > 0) ( return "thick solid) red"; ) else if (index % 2 == 1) ( return "thick double blue"; ) )); ));
Аргументами, що передаються функції, є індекс елемента в наборі та поточне значення якості. Ця змінна посилається на об'єкт HTMLElement, що відповідає елементу, а функція повертає значення, яке потрібно встановити.
Використання спеціалізованих методів для роботи з властивостями CSS
На додаток до методу css() jQuery визначено ряд спеціалізованих методів, призначених для отримання або встановлення значень конкретних властивостей. Перелік цих методів наведено у таблиці нижче:
| Метод | Опис |
|---|---|
| height() | Повертає висоту (у пікселях) першого елемента, що міститься в об'єкті jQuery |
| height(значення) | Встановлює висоту всіх елементів, що містяться в об'єкті jQuery |
| innerHeight() | Повертає внутрішню висоту (тобто висоту елемента, включаючи внутрішні відступи, але виключаючи межі та поля) першого з елементів, що містяться в об'єкті jQuery |
| innerWidth() | Повертає внутрішню ширину (тобто ширину елемента, включаючи внутрішні відступи, але виключаючи межі та поля) першого з елементів, що містяться в об'єкті jQuery |
| offset() | Повертає координати першого з елементів, що містяться в об'єкті jQuery щодо початку документа |
| outerHeight(логічне_значення) | Повертає висоту першого з елементів, що містяться в об'єкті jQuery, включаючи внутрішні відступи та межі. Аргумент визначає, чи має при цьому враховуватися розмір полів |
| outerWidth(логічне_значення) | Отримує ширину першого з елементів, що містяться в об'єкті jQuery, включаючи внутрішні відступи та межі. Аргумент визначає, чи має при цьому враховуватися розмір полів |
| position() | Повертає координати першого з елементів, що містяться в об'єкті jQuery щодо його батьківського елемента, у якого заданий тип позиціонування |
| scrollLeft(), scrollTop() | Отримує значення відступу прокручування зліва або зверху для першого з елементів, що містяться в об'єкті jQuery |
| scrollLeft(значення), scrollTop(значення) | Встановлює значення відступу прокручування зліва або зверху для всіх елементів, що містяться в об'єкті jQuery |
| width() | Отримує ширину першого елемента, що міститься в об'єкті jQuery |
| width (значення) | Встановлює ширину всіх елементів, що містяться в об'єкті jQuery |
| height(функція), width(функція) | Встановлює висоту або ширину всіх елементів, що містяться в об'єкті jQuery, за допомогою функції |
Назви більшості цих методів говорять самі за себе, однак деякі з них потребують додаткових пояснень. Методи offset()і position()повертають об'єкт, що має властивості topі left, які вказують на положення елемента. Приклад використання методу position() наведено нижче.
На кількох прикладах розглянемо додавання властивостей CSSна сторінку сайту за допомогою jQuery. Розбираємо плюси та мінуси двох основних способів зміни стилів на сторінці.
Для зміни параметрів вмісту сторінки за допомогою бібліотеки jQuery для JavaScript, можна скористатися двома способами:
1. Зміна окремих властивостей
Змінимо елементи з властивостями class-oneі .class-twoпри наведенні на елемент із класом .сайт.
$ (".сайт"). mouseover (function () ( $ (".class-one, .class-two"). css ("width", "30%"); $ (".class-one, .class-two"). css ("height", "240px"); } ) ; |
Зміна класів
Цей спосіб краще і зручніше, якщо потрібно змінити багато різних властивостей за допомогою jQuery. Якщо всі ці властивості прописати в самому js файлі, то можна серйозно ускладнити читання та розуміння всього коду. Краще прописати всі стилі в файлі CSS, а за допомогою jQuery змінювати їх.
У разі події поміняємо стиль .class-oneна стилі .class-one .class-two:
$ (".сайт"). on ("mouseover mousemove" , function () ( $ (".class-one"). removeClass() . addClass ("class-one class-two"); } ) ; |
Якщо уважно подивитися на код вище, можна запитати, навіщо ми видаляємо клас class-oneі його потім повертаємо разом з іншим.
Так потрібно, тому що у цьому коді було вирішено .class-oneвикористовувати як «ярлик», щоб надалі можна було обробляти цей елемент, не згадуючи який у нього новий клас.
Повертає або змінює значення css-величин у вибраних елементах сторінки. Функція має чотири варіанти використання:
повертає значення CSS-величини styleNameу вибраного елемента. Якщо вибрано кілька елементів, значення буде взято у першого.
css-величині styleNameбуде надано значення value, всі вибрані елементи.
групі css-величин styleName1, styleName2, ...будуть присвоєні значення value1, value2, ..., всі вибрані елементи.
css-величині styleNameбуде присвоєно значення, повернене функцією користувача. Функція викликається окремо для кожного з вибраних елементів. При дзвінку, їй передаються такі параметри: indexпозиція елемента в наборі , value— поточне значення CSS-величини styleNameу елемента.
Приклади використання:
Зауваження: важливо відзначити, що використовуючи метод.css(styleName) ви отримаєте значення css-величини лише першого елемента з усіх вибраних. Якщо вам потрібні значення всіх елементів, слід використовувати конструкції типу .map() або .each() .
В дії
знайдемо серед списку планет рідну землю і виділимо її зеленим кольором:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ #list( width:260px; ) .item( width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: # EEEEEE; list-style-type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item"~gt~Меркурій~lt~/li ~gt~ ~lt~li class="item"~gt~Венера~lt~/li ~gt~ ~lt~li class="item"~gt~ Земля~lt~/li ~gt~ ~lt~li class="item"~gt~Марс~lt~/li ~gt~ ~lt~li class="item"~gt~Юпітер~lt~/li ~gt ~ ~lt~li class="item"~gt~Сатрурн~lt~/li ~gt~ ~lt~li class="item"~gt~Уран~lt~/li ~gt~ ~lt~li class=" item"~gt~Нептун~lt~/li ~gt~ ~lt~li class="item"~gt~Плутон~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("background-color", function(i,val)( if($(this).text() == "Земля") return "#cceecc"; else return val ;)); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Бібліотека jQuery дозволяє керувати властивостями та атрибутами елементів оберненого набору, змінюючи початкові значення. Можна встановлювати нові властивості, отримувати та змінювати значення початкових властивостей. Видаляючи або додаючи класи, можна динамічно змінювати стиль відображення елементів.
Маніпулювання властивостями та атрибутами елементів
1. Додавання та видалення класу
1.1. Метод.addClass()
Додає цей клас (або кілька класів) до кожного елемента оберненого набору. Щоб цей метод спрацював, необхідно заздалегідь створити стиль для класу, що додається. Метод не видаляє старий клас, а додає новий.
AddClass(ім'я класу) ім'я класу- одне або більше імен класу, відокремлених один від одного пробілами. .addClass(функція) функція— повертає одне або більше класів, розділених пробілом, які будуть додані до існуючих. Як аргумент приймає індекс елемента в наборі та існуюче ім'якласу(ів).
1.2. Метод.removeClass()
Видаляє вказане ім'я класу у всіх елементах оберненого набору.
RemoveClass(ім'я класу) ім'я класу— необов'язковий параметр, одне або більше класів, іменованих пробілом. Якщо ім'я класу не вказано, метод видаляє всі існуючі класи елементів набору. Якщо ім'я класу задано, видаляє лише вказаний клас. .removeClass(функція) функція— повертає одне або більше імен класу, розділених пробілом, які будуть видалені з наявних. Як аргумент приймає індекс елемента в наборі та старе ім'я класу(ів).
1.3. Метод.toggleClass()
Додає або видаляє один або більше класів кожного елемента в наборі. Кожен елемент оберненого набору перевіряється окремо. Метод додає зазначене ім'я класу, якщо воно відсутнє в елементі, і видаляє ті елементи, де воно присутній. Використовується для перемикання візуального представлення елементів.
ToggleClass(ім'я класу) ім'я класу— одне або більше класів, розділених пробілами, які будуть перемикатися для кожного елемента набору. .toggleClass(ім'я класу, логічне значення) ім'я класу— одне або більше класів, розділених пробілами, які будуть перемикатися для кожного елемента набору. логічне значення- Встановлює, додати або видалити вказаний клас. Значення true додає клас, false – видаляє. .toggleClass(логічне значення) логічне значення— необов'язковий параметр, встановлює, чи перемикатимуться класи кожного елемента набору. .toggleClass(функція, логічне значення) функція— повертає ім'я класу, яке перемикатиметься для кожного елемента набору. Як аргументи отримує індекс елемента в наборі та старе значення класу. логічне значення— необов'язковий параметр, встановлює, чи перемикатимуться класи кожного елемента набору.
1.4. Метод.hasClass()
Перевіряє наявність вказаного іменікласу хоча б один елемент у відповідному наборі. Повертає true , якщо хоча б один з елементів у наборі має ім'я класу, що перевіряється, в іншому випадку — false .
HasClass(ім'я класу) ім'я класу- Рядок з ім'ям класу для пошуку.
2. Зміна атрибутів елементів
Метод отримує значення атрибута першого елемента набору або встановлює одне або більше значень атрибутів елементів набору.
2.1. Метод.attr()
.attr(ім'я атрибута) ім'я атрибута— повертає значення атрибута першого елемента до обгорнутого набору. Якщо атрибут відсутній, повертає undefined. .attr(ім'я атрибута, значення) ім'я атрибута значення— рядок або число, яке буде додано як значення атрибута для всіх елементів оберненого набору. .attr(атрибути) атрибути— значення, що копіюються з властивостей об'єкта, будуть встановлені для всіх обернених елементів. .attr(ім'я атрибута, функція) ім'я атрибута— Вказує ім'я атрибута, для якого буде встановлено значення. функція— як аргументи приймає індекс елемента в наборі та старе значення атрибута. Значення, що повертається, буде встановлено як значення атрибута.2.2. Метод.removeAttr()
Видаляє зазначений атрибут кожного елемента обернутого набору.
RemoveAttr(ім'я атрибута) ім'я атрибута- Рядок, що визначає атрибут для видалення.
3. Зміна властивостей елемента
3.1. Метод.css()
Повертає значення властивості стилю для першого елемента в обгорнутому наборі або встановлює одне або кілька CSS-властивостей для кожного елемента набору.
Css(ім'я властивості) ім'я властивості— рядок з ім'ям властивості, повертає його значення для першого елемента набору. .css(імена властивостей) імена властивостей— масив властивостей, повертає їх значення для першого елемента набору. .css(ім'я властивості, значення) ім'я властивості значення— рядок або число, які будуть встановлені як значення зазначеної властивості для всіх елементів оберненого набору. .css(ім'я властивості, функція) ім'я властивості- Рядок з ім'ям властивості. функція— як аргумент функції передається індекс елемента в наборі і старе значення властивості. Значення, що повертається, буде встановлено для всіх елементів набору. .css(об'єкт властивостей) об'єкт властивостей— додає CSS-властивості, імена яких визначені як ключі в переданому об'єкті, пов'язані з ними значення для всіх елементів у відповідному наборі.
4. Отримання та зміна розмірів та координат елемента
4.1. Метод.width()
Повертає поточне значення ширини першого елемента в наборі або встановлює ширину для кожного елемента набору. Одиниця виміру за замовчуванням px. Метод можна використовувати у разі, якщо отримане значення буде використовуватись у математичних розрахунках. Розміри обчислюються без урахування відступів та товщини рамки, без вказівки одиниці виміру. При зміні розміру вікна браузера розміри елемента можуть змінюватися.
Width() Метод викликається без параметрів. Повертає поточне значення ширини першого елемента в наборі без вказівки одиниці вимірювання. .width (значення) значення— ціле числове значення або рядок-значення ширини, яке буде встановлене для кожного елемента набору. .width(функція) функція— приймає як аргумент індекс елемента і старе значення властивості, значення, що повертається, буде встановлено як ширина для всіх елементів.
4.2. Метод.height()
Повертає поточне значення висоти для першого елемента набору або встановлює висоту кожного елемента набору.
Height() Метод викликається без параметрів. Повертає поточне значення висоти першого елемента в наборі. .height(значення) значення— ціле числове значення або рядок-значення висоти, яке буде встановлене для кожного елемента набору. .height(функція) функція— приймає як аргумент індекс елемента і старе значення властивості, значення, що повертається, буде встановлено як висота для всіх елементів.
4.3. Метод.innerWidth()
Повертає ширину першого елемента в обгорнутому наборі з урахуванням відступів padding або встановлює її кожного елемента обернутого набору.
InnerWidth() Метод викликається без параметрів. Повертає поточне значення внутрішньої ширини першого елемента в наборі. .innerWidth(значення) значення— ціле числове значення, яке буде встановлене для кожного елемента набору. .innerWidth(функція) функція
4.4. Метод.innerHeight()
Повертає висоту першого елемента в обгорнутому наборі з урахуванням відступів padding.
InnerHeight() Метод викликається без параметрів. Повертає поточне значення внутрішньої висоти першого елемента в наборі. .innerHeight(значення) значення— ціле числове значення, яке буде встановлене для кожного елемента набору. .innerHeight(функція) функція— приймає як аргумент індекс елемента і старе значення властивості, значення, що повертається, буде встановлено як внутрішня ширина для всіх елементів набору.
4.5. Метод.outerWidth()
Повертають ширину першого елемента обгорнутому наборі. У ці розміри входять товщина рамки та ширина відступу.
OuterWidth (логічне значення) логічне значення
4.6. Метод.outerHeight()
Повертають висоту першого елемента обгорнутому наборі. У ці розміри входять товщина рамки та ширина відступу.
OuterHeight(логічне значення) логічне значення— необов'язкове значення, якщо встановлено true, значення margin враховується, інакше немає.
4.7. Метод.offset()
Отримує поточні координати першого елемента або встановлює координати кожного елемента. Повертає JavaScript з властивостями left і top , що містять координати першого елемента в px оберненого набору щодо початку документа. Метод застосовується лише до видимих елементів.
Offset() Метод викликається без параметрів.
4.8. Метод.position()
Повертає JavaScript з властивостями left і top , що містять координати першого елемента в px оберненого набору щодо найближчого батьківського елемента. Метод застосовується лише до видимих елементів.
Position() Метод викликається без параметрів.
Давно в моєму блогу не було статей про JQuery. Ні, статті з його застосуванням були, звичайно, але він там виступав у ролі допоміжного інструменту, а рубрика «Вивчаємо JQuery» тим часом покривалася пилом. А тим часом, настав час, перейти до найцікавішої частини навчання – додавання різних ефектів, саме те, через що його беруться вивчати багато людей. І в сьогоднішній статті ви дізнаєтеся, як змінювати CSS-властивості "на льоту".
Перш ніж ми перейдемо безпосередньо до ефектів, повернемося трохи назад і поглянемо на CSS. У попередніх статтях ми змінювали зовнішній виглядсторінки, шляхом додавання або видалення різних CSS-класів, які перед цим, звичайно ж, повинні бути створені у CSS-файлі. Як правило, це правильний спосіб, тому що він зважає на роль CSS при формуванні сторінки.
Однак трапляються випадки, коли вам потрібно змінити стиль CSS, якого немає у файлі стилів, або який не можна описати. Для таких випадків JQuery існує метод.css() .
Щоб отримати значення CSS-властивості, ми повинні просто передати ім'я властивості як рядок, приблизно так. css('backgroundColor') .
Властивості, що складаються з декількох слів, можна записувати через дефіс, як у CSS-файлі (background-color) або різним регістром, як вони записуються в DOM (backgroundColor). Для установки властивостей CSS метод.css() використовує два способи. Перший спосіб – два параметри, назва CSS-властивості та його значення, через кому. Другий - карта, що складається з пар властивість-значення.
Css("property","value") .css((property1: "value1", "property-2": "value2"))
Ми будемо використовувати метод. css() , так само як використовували. addClass() - об'єднаємо їх селектором і прив'яжемо подію. Розберемо метод.css() на конкретному прикладі. Нам знадобиться наступна HTML-розмітка:
І трохи CSS:
#textbox( border: 1px solid #000; background: #DFECFF; margin: 20px auto; text-align: left; padding: 10px; width: 400px; color: #0000a0; font-style: italic; clear: both; )
В результаті у нас з'явиться така сторінка:
На сторінці є дві кнопки – для збільшення та зменшення шрифту. В принципі тут можна використовувати метод.addClass() , описаний у попередній статті, але давайте трохи ускладнимо завдання, і уявімо, що нам потрібно зменшувати або збільшувати текст, при кожному натисканні відповідної кнопки. Це звичайно можна реалізувати через опис окремого класу для кожного кліка, але набагато простіше буде отримувати поточний розмір тексту, і збільшувати (зменшувати) його за заданим значенням.
Наш код традиційно починається з $(document).ready() та обробника подій кнопки $("#increase").click() :
$(document).ready(function()( $("#increase").click(function()( )); ))
Далі, розмір шрифту можна легко отримати через $(“#textbox”).css("fontSize") . Однак, повертається значення буде містити як число так і одиниці виміру, тому нам потрібно зберегти кожну частину у власну змінну, після чого ми зможемо збільшити число, і знову приєднати до нього одиниці виміру. Також ми плануємо використовувати об'єкт JQuery більше одного разу, отже, було б непогано його зберегти в змінну.
$(document).ready(function() ( $("#increase").click(function() ( var $speech = $("div.speech"); var currentSize = $speech.css("fontSize") var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); num *= 1.4;
Перший рядок усередині функції.click() зберігає змінну з блоком #textblock.
Зверніть увагу, що ми використовуємо символ $ у імені змінної $speech . Оскільки $ - це допустимий символ для змінних JavaScript, ми можемо використовувати його як нагадування, що ця змінна зберігає об'єкт JQuery. Наступний рядок – зберігає змінну розмір шрифту блоку #textblock – наприклад, 12px.
Після цього ми використовуємо parseFloat() та slice() . Функція parseFloat() використовується для конвертування рядкових значень у числові (десяткові). Наприклад, рядок 12 буде конвертована в число 12. Якщо рядок починається з нечислового символу, parseFloat() поверне NaN, що означає: «Не числове значення» ( Not a Number).Другий аргумент функції parseFloat() , гарантує, що число буде конвертовано саме в десяткове значення.
Метод.sice() повертає підрядок, що починається з певного символурядки. Оскільки назва одиниць виміру, які ми використовуємо довжиною у два символи (px), ми вказуємо, що підрядок має починатися з двох останніх символів основного рядка.
Все що нам залишилося це помножити отримане значення змінної num на 1.4, а потім встановити розмір шрифту шляхом склеювання двох змінних num і unit:
$(document).ready(function()( $("#increase").click(function()( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize")); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); num*=1.4; $speech.css("fontSize", num + unit);
Тепер після натискання на кнопку «Збільшити», текст у блоці збільшується, як на представленому скріншоті:
Наступний клік на цій же кнопці, продовжує збільшувати текст у блоці.
Щоб зробити працюючої кнопку «Зменшити», ми ділитимемо значення змінної – num/=1.4 . І щоб не збільшувати розмір коду, ми можемо об'єднати два обробники подій. click () в один, через клас button . Потім, після встановлення змінних, ми легко можемо множити або ділити, ґрунтуючись на ID кнопки, яка була натиснута. Ось як має виглядати код:
$(document).ready(function()( $("input").click(function()( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize"); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); ( num/=1.4; ) $speech.css("fontSize", num + unit); )); ))
Вище було наведено найпростіший прикладвикористання метода.css() практично. Можна навести ще один приклад використання цього способу.
Поділ пунктів меню
Досить часто в дизайні зустрічається такий прийом, як розділення пунктів меню вертикальною лінією, причому перший і останній пункт меню не повинні мати бічній лінії.
Для такого меню буде потрібна наступна HTML-розмітка:
Ul( list-style: none; ) ul li( list-style: none; float: left; background: #DFECFF; display: block; padding: 10px; border-right: 1px gray solid; ) ul li a( text- decoration: none; color: #000;
Ось так буде виглядати наше меню:
А для того, щоб прибрати правий роздільник у останнього пункту меню (четвертий пункт), можна використовувати такий код:
$(document).ready(function()( $("#menu ul li:last").css("border-right", "none"); ));
І в результаті у нас виходить таке меню:
Як бачите користуватися цим методом досить просто і зручно, але все-таки намагайтеся не зловживати ним, а використовувати тільки в тих випадках, коли немає можливості додати потрібний стиль у файл CSS.