Метод css в jQuery

23

Від автора: вітаю вас, друзі. У ряді попередніх статей ми з вами вивчали основи вибірки елементів. Ми дізналися різні способи: вибірка за класами та ідентифікаторів, вибірка по атрибутах і індексами елементів і т. д. Тепер, коли ми можемо вибирати елементи, прийшла пора навчитися щось з ними робити. Почнемо з вивчення методу в jQuery css.

Отже, навчившись вибирати колекцію елементів, давайте вчитися працювати з цією колекцією. Почнемо з методу css, який дозволяє працювати з css елементів, тобто одержувати і змінювати властивості css вибраних елементів.

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

За допомогою властивості background ми встановили для нього деякий фоновий колір. Спробуємо отримати значення встановленого кольору:

var bg = $(‘#list’).css(‘background-color’);
console.log(bg);

Метод css в jQuery

Таким чином ми отримали RGB значення кольору. Для того щоб змінити колір або будь-яке інше властивість css елемента, нам необхідно передати потрібне значення властивості другим параметром. Спробуємо змінити колір:

$(‘#list’).css(‘background-color’, ‘rgb(255,255,0)’); // так можна
$(‘#list’).css(‘background-color’, ‘yellow’); // або так
$(‘#list’).css(‘background-color’, ‘#ffff00’); // або так

Метод css в jQuery

Як бачите, в якості значення кольору приймається будь-який формат кольору, як і в CSS. А що якщо нам необхідно поміняти відразу кілька властивостей css вибраного елемента? Теоретично ми можемо зробити це, викликавши кілька разів метод css:

$(‘#list’).css(‘background-color’, ‘#ffff00’);
$(‘#list’).css(‘font-style’, ‘italic’);
$(‘#list’).css(‘font-size’, ’18px’);

Метод css в jQuery

Однак такий варіант не дуже зручний — надто багато рядків коду, щоб змінити оформлення одного елемента. Можна скоротити код до одного рядка, викликаючи методи ланцюжком, один за іншим:

$(‘#list’).css(‘background-color’, ‘#ffff00’).css(‘font-style’, ‘italic’).css(‘font-size’, ’18px’);

Результат буде тим же, але тепер занадто багато викликів одного і того ж методу. Є більш зручний варіант вказати відразу кілька значень властивостей css. Для цього ми можемо передати параметром об’єкт властивостей:

$(‘#list’).css({
«background-color»: «#ffff00»,
«font-style»: «italic»,
«font-size»: «18px»
});

Погодьтеся, так набагато зручніше і, головне, зрозуміліше. На цьому поки що зупинимося. У наступній статті розглянемо додаткові варіанти управління оформленням елементів за допомогою jQuery. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!