Установка атрибутов

Umbrella JS — лёгкая библиотека для работы с DOM, предоставляющая удобный и лаконичный синтаксис для взаимодействия с элементами страницы. Одной из ключевых возможностей является работа с атрибутами элементов. Управление атрибутами включает установку, получение и удаление значений.

Метод attr()

Метод attr() в Umbrella JS используется для получения и установки атрибутов элементов. Он имеет две основные формы:

  1. Получение значения атрибута

    u('selector').attr('attributeName');

    Возвращает значение указанного атрибута первого элемента, соответствующего селектору. Если атрибут отсутствует, возвращается undefined.

    Пример:

    let src = u('img').attr('src');
console.log(src); // выводит путь к изображению

  2. Установка атрибута

    u('selector').attr('attributeName', 'value');

    Устанавливает атрибут для всех элементов, выбранных селектором.

    Пример:

    u('a').attr('target', '_blank'); // все ссылки откроются в новой вкладке

Установка нескольких атрибутов одновременно

Метод attr() также поддерживает передачу объекта с парой ключ-значение для массовой установки атрибутов:

u('img').attr({
    src: 'image.jpg',
    alt: 'Пример изображения',
    title: 'Подсказка при наведении'
});

В этом случае каждый ключ объекта становится именем атрибута, а значение — его содержимым. Это позволяет сократить код и повысить читаемость, особенно при работе с несколькими атрибутами.

Удаление атрибута

Для удаления атрибута используется метод removeAttr():

u('input').removeAttr('disabled');

Метод удаляет указанный атрибут у всех выбранных элементов, делая их доступными для взаимодействия. Это особенно полезно при динамическом управлении формами или элементами интерфейса.

Динамическое управление атрибутами

Umbrella JS позволяет применять атрибуты динамически в зависимости от состояния элементов или данных:

u('button').each(function(el) {
    if (!el.hasAttribute('data-active')) {
        u(el).attr('data-active', 'true');
    }
});

Метод each() перебирает все выбранные элементы и позволяет применять логику к каждому элементу отдельно, сохраняя удобство работы с DOM.

Взаимодействие с dataset

Для работы с пользовательскими атрибутами data-* можно использовать как метод attr(), так и стандартное свойство dataset:

// Через attr
u('.card').attr('data-id', '123');

// Через dataset
u('.card').each(function(el) {
    el.dataset.id = '123';
});

Использование attr() делает код более последовательным, особенно при управлении множеством элементов одновременно.

Практические советы

  • Установка атрибутов с объектом удобна при создании новых элементов или массовом обновлении уже существующих.
  • Метод attr() работает только с существующими элементами на странице. Для динамически создаваемых элементов следует применять его после добавления в DOM.
  • Использование removeAttr() упрощает работу с классами состояния (disabled, readonly) и пользовательскими атрибутами, предотвращая необходимость писать дополнительный JavaScript-код для проверки.

Пример комплексного применения

u('.profile-card').attr({
    'data-user-id': '42',
    'title': 'Профиль пользователя'
});

u('.profile-card button').attr('disabled', 'true');

u('.profile-card').each(function(card) {
    if (!card.hasAttribute('data-active')) {
        u(card).attr('data-active', 'true');
    }
});

В этом примере одновременно устанавливаются несколько атрибутов, блокируются кнопки и добавляются дополнительные пользовательские данные, демонстрируя гибкость и лаконичность Umbrella JS при работе с атрибутами.

Оглавление