Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге.

JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно.

Получение значения атрибута элемента

Метод getAttribute() используется для получения текущего значения атрибута элемента.

Если указанный атрибут не существует в элементе, он вернет null. Вот пример:

<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Выбираем элемент по ID
    var link = document.getElementById("myLink");
    
    // Получаем значение атрибута
    var href = link.getAttribute("href");
    alert(href); // Outputs: https://www.google.com/
    
    var target = link.getAttribute("target");
    alert(target); // Outputs: _blank
</script>

JavaScript предоставляет несколько различных способов выбора элементов на странице. Подробнее см. Руководство по селекторам DOM в JavaScript.

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

Метод setAttribute() используется для установки атрибута для указанного элемента.

Если атрибут уже существует в элементе, значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением. Код JavaScript в следующем примере добавит class и disabled атрибут к элементу <button>.

<button type="button" id="myBtn">Click Me</button>

<script>
    // Выбираем элемент
    var btn = document.getElementById("myBtn");
	
    // Устанавливаем новые атрибуты
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

Аналогично, вы можете использовать метод setAttribute() для обновления или изменения значения существующего атрибута в элементе HTML. Код JavaScript в следующем примере обновит значение существующего атрибута href элемента <a>.

<a href="#" id="myLink">Ссылка</a>

<script>
    // Выбираем элемент
    var link = document.getElementById("myLink");
	
    // Изменяем значение атрибута href
    link.setAttribute("href", "https://zolin.digital/");
</script>

Удаление атрибутов из элементов

Метод removeAttribute() используется для удаления атрибута из указанного элемента.

Код JavaScript в следующем примере удалит атрибут href из элемента <a>.

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Выбираем элемент
    var link = document.getElementById("myLink");
	
    // Удаляем атрибут href
    link.removeAttribute("href");
</script>

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по функциям в JavaScript

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.