Головна → Windows 10 Управляємо стилями CSS за допомогою jQuery. JQuery додаємо властивості CSS Jquery зміна css властивостей

Управляємо стилями CSS за допомогою jQuery. JQuery додаємо властивості CSS Jquery зміна css властивостей

Бібліотека 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 обернутого набору щодо початку документа. Метод застосовується тільки до видимих \u200b\u200bелементів.

Offset () Метод викликається без параметрів.

4.8. Метод.position ()

Повертає об'єкт JavaScript з властивостями left і top, що містять координати першого елемента в px обернутого набору щодо найближчого батьківського елемента. Метод застосовується тільки до видимих \u200b\u200bелементів.

Position () Метод викликається без параметрів.

Добрий всім день. Сьогодні як я і обіцяв в уроці розглянемо методи, які використовуються для управління CSS стилями за допомогою jQuery.

Нагадаю, що за допомогою стилів ми можемо не тільки визначати зовнішній вигляд елемента на веб сторінці, але і управляти його положенням, показувати і приховувати його за своїм бажанням, змінювати розмір, та й багато ще чого. Образно кажучи, той хто отримує доступ до управління стилями CSS, Той управляє найбільшою веб сторінкою! А jQuery таку можливість своїм користувачам надає!

В jQuery є три категорії методів: одні маніпулюють з відібраними елементами, інші повертають значення елемента, а треті змінюють самі елементи.

Щоб додати якому-небудь елементу стиль, необхідно скористатися таким методом: .css (name, value)

Давайте, поки ми не пішли далеко від верху сторінки, поміняємо стиль у назви статті. Зробимо його, наприклад, червоного кольору:

$ ( "# Title" .css ( "color", "# cc0000");

У цьому прикладі я відібрав елемент з ідентіфікаторм id \u003d "title", Який відповідає за відображення назви сайту і додав стиль тобто колір. А кнопки відповідають за застосування або повернення стилю за замовчуванням.
Як параметри можуть використовуються назви і значення, які застосовуються в CSS: background, border, font-style, color і т.д.

Якщо необхідно задати для елемента кілька CSS-правий, то краще використовувати наступну конструкцію:

.css ((properties))

$ ( "# Text"). Css (( "color": "blue", "fontStyle": "italic", "font-weight": 900));

Дана інструкція зробить у попереднього параграфа колір тексту синім, а насиченість шрифту встановить рівній 900.

Зверніть увагу, що для складно-складених властивостей CSS начебто font-weight і background-color також використовуються їх еквіваленти з JvaScript: fontWeight, backgroundColor і т.д.

Для демонстрації інших методів роботи зі стилями я скористаюся допомогою різнокольорових квадратів, які вже неодноразово співслужили мені службу в таких уроках як і.

Нагадаю код і стилі для їх створення:

HTML код:

Стилі CSS:

DivRel (position: relative; width: 600px; height: 275px; border: dotted 1;) .big (position: absolute; width: 200px; height: 200px; left: 200px; top: 50px; background-color: red; border : solid 1px white; color: white; text-align: right; z-index: 1;) .red (position: absolute; width: 100px; height: 100px; left: 200px; top: 50px; background-color: red ; border: solid 1px white; color: white; text-align: right; z-index: 1;) .green (position: absolute; width: 100px; height: 100px; left: 250px; top: 75px; background-color : green; border: solid 1px white; color: white; text-align: right; z-index: 2;) .blue (position: absolute; width: 100px; height: 100px; left: 300px; top: 100px; background -color: blue; border: solid 1px white; color: white; text-align: right; z-index: 3; cursor: pointer;)

Розглянемо видалення і присвоєння якому-небудь елементу CSS-класу:
.removeClass (class)
.addClass (class)

$ ( "# Style2"). Click (function () ($ ( "# divRel1\u003e div: first"). RemoveClass ();)); $ ( "# Rstyle2"). Click (function () ($ ( "# divRel1\u003e div: first"). AddClass ( "big");));

Дана інструкція після натискання на кнопку: "Видалити клас", Видалить клас у першого дочірнього елемента міститься в ідентифікаторі id \u003d "divRel1" і додасть до нього клас class \u003d "big" після натискання на кнопку: "Додати клас".

Наступний метод додає вказаний клас до елементу, якщо його немає, або видаляє цей клас, якщо елемент вже має його:
.toggleClass (class)

Спробуйте покликати мишкою в межах рамки обрамляє кольорові квадрати. Колір фону буде поперемінно змінюватися.

$ ( "# DivRel1"). Click (function () ($ (this) .toggleClass ( "yellow");));

А отримати (перший рядок) і задати (другий рядок) ширину і висоту елемента елемента відповідно можна за допомогою методів:
.width ()
.width (value)
.height ()
.height (value)

$ ( "# DivRel1\u003e div: last"). Toggle (function () ($ (this) .width (200) .height (170);), function () ($ (this) .width (100) .height (100);));

Продемонстрований вище код відбирає останній : last елемент ідентифікатора id \u003d "divRel1" і за допомогою перемикача toggle змінює або відновлює значення за замовчуванням при кліці на синій квадрат. Для підказки в стилях визначено властивість: cursor: pointer.

Це дуже цікава і важлива особливість методів jQuery: Вони використовуються, як для завдання параметрів, так і для отримання значень цих параметрів.

Але і це ще не все! jQuery дозволяє, в разі необхідності видалити CSS-файл, пов'язаний з HTML-Сторінка і прив'язати новий:
$ ( "Link"). Attr ( "href", "Alternative.css");

Спробуйте поміняти, на ваш розсуд, стилі або код jQuery. Цікаво, що у вас вийде?

Дата: 2011-06-28

подобається

Коментарі до замітки:

Відмінна стаття. Все зрозуміло. Спасибі.

Саме для цього ми і набираємо віддалених співробітників, які будуть виконувати роботу, тобто ставити лайки і отримати за це гроші.

Вам достатньо просто зареєструватися на нашому сервісі. \u003e www.oplata-vklike.tk<

Пропонуємо Вам роботу без вкладень, на системі автоматичного прийому і обробки замовлень.

Ми надаємо:

Наш ліцезіонний софт.
- документи з усією необхідною доп. інформацією.
- постійна технічна підтримка.

Оплата від 5500 в день. Виплати щодня.

Більш детальна інформація на нашому сайті \u003e\u003e obrabotka.zarplatt.ru<<

Наш сервіс надає справжні лайки на фото замовників, які готові платити за якість.

Щоб стати нашим віддаленим співробітником і почати ставити лайки, заробляючи при цьому 45 рублів за 1 поставлений лайк,

Досить просто зареєструватися на нашому сервісі. \u003e http://oplata-vklike.tk/<

Висновок зароблених коштів щодня протягом декількох хвилин.

Стабільна робота з навчанням, висока зарплата!

Ви працюєте вдома! Повністю чесно і прозоро;
Доступно для всіх - неважливо хто ви і який у вас досвід роботи в інтернеті!
Ви будете заробляти: понад чотирьох тисяч рублів в день!
Складність: Нескладно!
Оплата: - вже на наступний гроші у вас на рахунку!

Ознайомтесь з умовами на нашому сайті. \u003e realno-money.tk< Скопируйте и вставьте в адресную строку Вашего браузера.

Наш сервіс надає справжні лайки на фото замовників, які готові платити за якість.

Саме для цього ми і набираємо віддалених співробітників, які будуть виконувати роботу, тобто ставити лайки і заробляти за це гроші.

Вам достатньо просто зареєструватися на нашому сервісі. \u003e oplata-vklike.tk<

Висновок зароблених коштів щодня протягом декількох хвилин.

роботи через інтернет, з щоденними виплатами до 11 000 руб.

Пройдіть реєстрацію на нашому сайті. \u003e www.airline-rabota.tk<

Пропоную. Захоплюючу роботу в інтернеті. Без досвіду. Впевнений дохід від 5000 руб. на добу. Ця система дохідлива абсолютно всім.
Вам не обов'язково працювати цілодобово! Цілком достатньо приділяти роботі пару годин в день.
Припиніть думати, про те що в Всесвітній павутині заробляти не можна, в Інеті заробляти можна!
Легкими і зрозумілими для всіх способами. Найголовніше, чесно!
Режим роботи, встановлюєте самостійно.
Більш детальна інформація у нас на сайті. \u003e http://oplata-vklike.tk< скопируйте и вставьте в адресную строку вашего браузера.

Досить просто зареєструватися на нашому сервісі. \u003e http://oplata-vklike.tk/<

Висновок зароблених коштів щодня протягом декількох хвилин.

Унікальний сервіс допомоги отримання кредиту від приватного інвестора, а так само кредитних організацій. Підходить як компаніям, так і приватним особам.

Позика від приватного інвестора.

Наша компанія допомагає зустрітися інвестору і позичальникові.

Прямий контакт з інвестором
Будь-яка кредитна історія
Потрібен тільки паспорт
Працюємо з приватними особами та фірмами
будь-який регіон
Сума від 5,000 до 50,000,000 руб
Відсоток схвалення 97%

переваги:

Без застави і поручительства!
- Ставка - всього від 1% в місяць!
- Без прихованих платежів і комісій!

Оформіть заявку у нас на сайті. \u003e www.ch-investor.tk<

Наш сервіс надає справжні лайки на фотографії замовників, які готові платити за якість.

Досить просто зареєструватися на нашому сервісі. \u003e http://oplata-vklike.tk/<

Висновок зароблених коштів щодня протягом декількох хвилин.

Провідна компанія в Росії і країнах СНД з продажу авіаквитків «Airline»

Найбільша міжнародна компанія з продажу А / В квитків
терміново набирає співробітників на постійну основу для нескладної
роботи через інтернет, з щоденними виплатами від 11 000 руб.

Працюючи в нашій компанії Ви отримуєте:

Дотримання трудового кодексу
- Повний соцпакет, оплачувана відпустка, лікарняний, санаторій.
- Кожен наш співробітник на дому гарантовано отримує високий дохід. руб. у день.
- Гарантовані стабільні виплати зароблених грошей.
- Виплати відбуваються щодня на банківські карти або електронні гаманці.

Пройдіть реєстрацію у нас на сайті. \u003e http://airline-rabota.tk/<

Без вкладень, досвід і професійні навички не потрібні!

Давно в моєму блозі не було статей про 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 \u003d $ ( "div.speech"); var currentSize \u003d $ speech.css ( "fontSize") ; var num \u003d parseFloat (currentSize, 10); var unit \u003d currentSize.slice (-2); num * \u003d 1.4; $ speech.css ( "fontSize", num + unit);));));

Перший рядок всередині функціі.click () зберігає змінну c блоком #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 \u003d $ ( "# textbox"); var currentSize \u003d $ speech.css ( "fontSize"); var num \u003d parseFloat (currentSize, 10); var unit \u003d currentSize.slice (-2); num * \u003d 1.4; $ speech.css ( "fontSize", num + unit);));))

Тепер після кліка по кнопці «Збільшити», текст в блоці збільшується, як на представленому скріншоті:

Наступний клік по цій же кнопці, продовжує збільшувати текст в блоці.

Для того щоб зробити працюючої кнопку «Зменшити», ми будемо ділити значення змінної - num / \u003d 1.4. І щоб не збільшувати розмір коду, ми можемо об'єднати два обробника собитій.click () в один, через клас button. Потім, після установки змінних, ми легко можемо множити або ділити, грунтуючись на ID кнопки, яка була натиснута. Ось як повинен виглядати код:

$ (Document) .ready (function () ($ ( "input"). Click (function () (var $ speech \u003d $ ( "# textbox"); var currentSize \u003d $ speech.css ( "fontSize"); var num \u003d parseFloat (currentSize, 10); var unit \u003d currentSize.slice (-2); if (this.id \u003d\u003d "increase") (num * \u003d 1.4;) else if (this.id \u003d\u003d "decrease") (num / \u003d 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-файл.

Повертає або змінює значення 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 \u003d "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 \u003d "list" ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Меркурій ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Венера ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ земля ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Марс ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Юпітер ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Сатрурн ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d "item" ~ gt ~ Уран ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d " item "~ gt ~ Нептун ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d" item "~ gt ~ Плутон ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ script ~ gt ~ $ ( "# list .item"). css ( "background-color", function (i, val) (if ($ (this) .text () \u003d\u003d "Земля") return "#cceecc"; else return val ;)); ~ Lt ~ / script ~ gt ~ ~ lt ~ / body ~ gt ~ ~ lt ~ / html ~ gt ~

Збережіть цю сторінку для тестування наведених нижче прикладів.

Бібліотека jQuery надає ряд зручних спеціалізованих методів, значно спрощують роботу зі стилями CSS. Одним з найбільш широко використовуваних методів такого роду є метод css (), Короткий опис якого наведено в таблиці нижче:

При зчитуванні значень властивостей за допомогою методу css () ви отримуєте значення властивості, яке має перший з елементів, що містяться в об'єкті jQuery. У той же час при установці властивості, що вноситься застосовується до всіх елементів набору. Приклад найпростішого використання методу css () наведено нижче:

$ (Function () (var sizeVal \u003d $ ( "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 \u003d ( "font-size": "1.5em", "color": "blue"); $ ( "label"). Css (cssVals);));

Обидва варіанти сценарію призводять до одного і того ж результату, показаному на малюнку:

Установка відносних значень

В якості аргументів метод css () може приймати також відносні значення. Вони являють собою числові значення, яким передують знаки + \u003d і - \u003d і які додаються або віднімаються від поточного значення. Цей прийом можна використовувати лише в відношенні числових величин. Відповідний приклад наведено нижче:

$ (Function () ($ ( "label: odd"). Css ( "font-size", "+ \u003d 5") $ ( "label: even"). Css ( "font-size", "- \u003d 5 ")));

Відносні значення виражаються в тих же одиницях, що і значення властивостей. В даному випадку розмір шрифту збільшується на 5 пікселів для непарних елементів label і зменшується на ту ж величину для парних. Результат показаний на малюнку:

Установка властивостей за допомогою функції

Можна встановлювати значення властивостей динамічно, передаючи функцію методу css (). Відповідний приклад наведено нижче:

$ (Function () ($ ( "label"). Css ( "border", function (index, currentValue) (if ($ (this) .closest ( "# row1"). Length\u003e 0) (return "thick solid red ";) else if (index% 2 \u003d\u003d 1) (return" thick double blue ";)));));

Аргументами, що передаються функції, є індекс елемента в наборі і поточне значення властивості. Мінлива this посилається на об'єкт HTMLElement, відповідний елементу, а функція повертає значення, яке потрібно встановити.

Використання спеціалізованих методів для роботи з властивостями CSS

На додаток до методу css () в jQuery визначено ряд спеціалізованих методів, призначених для отримання або установки значень конкретних властивостей. Перелік цих методів наведено в таблиці нижче:

Методи для роботи з конкретними властивостями CSS

метод	опис
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 () наведено нижче.

Це цікаво: