Від автора: вітаю вас, друзі. У цій статті ми познайомимося з методом attr в jQuery і дізнаємося, як працювати з атрибутами елементів в jQuery, а також дізнаємося додаткові способи управління оформленням елементів, крім методу css.
У попередній статті ми познайомилися з методом css в jQuery, завдяки яким можна отримувати або змінювати властивості css у елемента і, відповідно, оформляти елемент. Однак метод css — не єдиний спосіб роботи з оформленням елемента. Давайте познайомимося з іншими можливостями і почнемо з методів, які дозволяють маніпулювати класами елементів.
Припустимо у нас є кнопка:
Кнопка
І пара класів, які можна використовувати для оформлення кнопки:
.btn{
border: 1px solid transparent;
cursor: pointer;
font-size: 14px;
padding: 6px 12px;
text-align: center;
}
.btn-success{
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff;
}
Використовуючи jQuery ми хочемо динамічно оформити цю кнопку. Звичайно, ми могли б взяти стилі з описаних правил і, використовуючи метод css, оформити кнопку. Однак є спосіб простіше і краще. jQuery пропонує набір методів для маніпулювання класами елементів і в першу чергу нам цікаві два з цих методів — addClass і removeClass.
Як ви вже здогадалися з назви методів, перший додає клас, другий — видаляє. Давайте спробуємо додати перший клас — btn:
$(‘button’).addClass(‘btn’);
Нам не довелося писати стилі в коді JS, достатньо всього-то присвоїти існуючий клас CSS і описані в ньому стилі будуть застосовані до елементу. Це досить зручно, оскільки якщо ми надалі захочемо змінити оформлення елемента, нам не потрібно буде лізти в код jQuery, достатньо буде зробити зміни у файлі стилів.
Якщо нам потрібно додати більше одного класу, тоді ми просто перелічимо потрібний набір класів через пробіл, точно так само, як це робиться в коді HTML:
$(‘button’).addClass(‘btn btn-success’);
Метод removeClass має аналогічний синтаксис, але працює з точністю до навпаки, тобто видаляє один або більше класів у елементів. Спробуйте перевірити це самостійно.
І ще пара незамінних методів, які ми покладемо в скарбничку, методи attr() і removeAttr. Перший метод дозволяє отримати або встановити значення будь-якого атрибута елемента, другий — видаляє вказаний атрибут.
Завдяки цим методам, ми можемо маніпулювати абсолютно будь-якими атрибутами елементів: src, alt, width, height і т. д. у тега img, href — у тега посилання та іншими. Для прикладу візьмемо ту ж кнопку:
Кнопка
І отримаємо значення її атрибут class (адже це також атрибут будь-якого елементу):
var btn = $(‘button’).attr(‘class’);
console.log(btn);
Працює! Ну а якщо ми можемо отримати значення атрибута клас, значить, можемо змінити або встановити його. Наприклад, якщо кнопки не призначений клас, тоді ми можемо це зробити, використавши метод attr:
$(‘button’).attr(‘class’, ‘btn btn-success’);
Або ж, навпаки, можемо видалити значення зазначеного атрибута:
$(‘button’).removeAttr(‘class’);
Звичайно, для маніпулювання класами логічніше використовувати спеціальні методи addClass і removeClass, але суть роботи методу attr, вважаю, повинна бути зрозуміла. На цьому ми завершимо поточну статтю. Більше і jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!
