util.attr()

Атрибуты

Получить значение атрибута. Установить атрибут и значение. Изменить значение существующего атрибута у выбранного элемента.

attr(element, name [, value]);

Параметр	Тип	Описание
`element`	Nodes	Элемент HTML
`name`	String	Имя атрибута
`value`	mixed	Значение атрибута

Если атрибута не существует, он будет создан. Если указанный атрибут уже существует, его значение изменится на новое. Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay HTML-элемента <audio>, используйте пустое значение.
Например: util.attr(element, 'autoplay', '');

Применение

<a href="#" id="my-link">Ссылка</a>

var element = util.$('#my-link');

// Get. Получить значение атрибута
var attrValue = util.attr(element, 'id');

// Set. Установить значение атрибута
util.attr(element, 'title', attrValue);

Результат

В результате ссылке будет добавлен атрибут title с текстом «my-link», который будет отображаться в всплывающей подсказке.

<a href="#" id="my-link" title="my-link">Ссылка</a>

Дополнительные примеры

Отключаем кнопку

В данном примере устанавливаем HTML атрибут disabled для кнопки <button>, делая её отключённой.

<button id="btn" class="uk-button">Кнопка</button>

const btn = util.$('#btn');

util.attr(btn, 'disabled', 'disabled');

Результат

<button id="btn" class="uk-button" disabled="disabled">Кнопка</button>

Имя класса и всплывающая подсказка

В следующем примере получаем значение атрибута class у одного элемента и добавляем кнопке новый атрибут uk-tooltip, значение которого будет иметь имя класса. В результате у кнопки появится всплывающая подсказка с текстом «uk-fade».

<div id="target" class="uk-fade">Отдающий</div>
<button id="result">Принимающий</button>

const elemTarget = util.$('#target');
const elemResult = util.$('#result');

// getAttribute. Берем значение атрибута
let attrValue = util.attr(elemTarget, 'class');

// setAttribute. Устанавливаем атрибут и значение
util.attr(elemResult, 'uk-tooltip', attrValue);

Результат

<div id="target" class="uk-fade">Отдающий</div>
<button id="result" uk-tooltip="uk-fade">Принимающий</button>