Множественная установка атрибутов

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

Метод attr с объектом

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

Пример:

u('a.link').attr({
    href: 'https://example.com',
    target: '_blank',
    title: 'Переход на Example'
});

В этом примере к каждому элементу с классом link применяются сразу три атрибута: href, target и title. Такой подход избавляет от многократного вызова attr и делает код более читаемым.

Поддерживаемые типы значений

Значениями атрибутов могут быть строки, числа или логические значения, которые автоматически преобразуются в строку. Это позволяет устанавливать стандартные HTML-атрибуты без дополнительных преобразований.

u('input[type="checkbox"]').attr({
    checked: true,
    disabled: false
});

В результате checkbox станет отмеченным (checked), а disabled будет проигнорирован, так как значение false не устанавливает атрибут в HTML.

Перезапись существующих атрибутов

При установке атрибутов объектом существующие значения перезаписываются. Если элемент уже имел атрибут с указанным именем, новый объект полностью заменяет старое значение.

u('img.logo').attr({
    src: 'new-logo.png',
    alt: 'Новый логотип'
});

Любой старый src и alt будут заменены на новые значения.

Множественные элементы

Umbrella JS работает с коллекцией элементов одновременно. Передача объекта с атрибутами применяется к каждому элементу в выборке:

u('button.action').attr({
    disabled: true,
    'data-role': 'primary'
});

Все кнопки с классом action станут неактивными и получат атрибут data-role="primary".

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

Объект можно формировать динамически с помощью функций или вычисляемых значений. Это особенно полезно при циклической генерации элементов или при зависимости значений атрибутов от состояния страницы:

const buttons = u('button');
buttons.each((el, index) => {
    u(el).attr({
        id: `btn-${index}`,
        'data-index': index
    });
});

Каждой кнопке присваивается уникальный идентификатор и соответствующий индекс в атрибуте data-index.

Сочетание с другими методами

Множественная установка атрибутов отлично комбинируется с методами addClass, removeClass, html и другими, создавая компактный и выразительный код для создания сложных интерфейсов:

u('div.card').attr({
    'data-id': 123,
    'aria-hidden': false
}).addClass('active').html('<p>Контент карточки</p>');

Здесь одновременно добавляются атрибуты, класс и внутреннее содержимое элемента.

Ограничения и особенности

  • Атрибут style рекомендуется устанавливать через метод css, так как при прямой записи в attr требуется полный стиль в виде строки.
  • Некоторые булевы атрибуты (например, checked, disabled, readonly) требуют значения true для установки и игнорируют false.
  • Объект не должен содержать вложенные структуры; ключи должны быть строками, соответствующими названиям атрибутов.

Резюме по использованию

  • Метод attr с объектом сокращает многократные вызовы и делает код читаемым.
  • Значения могут быть строками, числами или логическими.
  • Применяется ко всей выборке элементов одновременно.
  • Возможна динамическая генерация атрибутов через функции и циклы.
  • Совместим с другими методами Umbrella JS для комплексных манипуляций DOM.

Множественная установка атрибутов в Umbrella JS повышает продуктивность работы с DOM и делает код более лаконичным и структурированным.

Оглавление