Как получить атрибут элемента js
Для получения атрибута элемента можно использовать метод getAttribute() , который принимает имя атрибута и возвращает его значение. Например:
18 октября 2022
Для получения атрибута элемента в JavaScript можно использовать метод getAttribute() , который принимает имя атрибута и возвращает его значение. Например:
'btn btn-primary btn-link'
Стоит отметить две особенности получения атрибутов:
- Имена атрибутов регистронезависимы. Т.е. в примере выше мы можем указать как ‘class’ , так и ‘CLASS’ , так и ‘Class’ . Результат будет одинаков.
- Значение атрибута возвращается в виде строки. Т.е. если у элемента несколько классов, то может быть возвращено, например, такое значение: btn btn-primary btn-link
Element.getAttribute()
getAttribute() возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или «» (пустая строка); подробнее Notes.
Синтаксис
var attribute = element.getAttribute(attributeName);
- attribute — переменная, которой будет присвоено значение attributeName .
- attributeName — имя атрибута, значение которого необходимо получить.
Пример
var div1 = document.getElementById("div1"); var align = div1.getAttribute("align"); alert(align); // отобразит значение атрибута align элемента с
Примечания
Когда метод getAttribute вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.
В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают null , когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае — пустая строка и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать hasAttribute, чтобы проверять наличие атрибутов перед вызовом getAttribute() , если может быть такое, что выбранный элемент не будет содержать искомого атрибута.
Методы DOM имеют дело с атрибутами элементов:
| Не знают пространства имён, наиболее часто используемые методы | Вариант, знающий пространство имён (Уровень DOM 2) | Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко) | Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко) |
|---|---|---|---|
| setAttribute (DOM 1) | setAttributeNS (en-US) | setAttributeNode (en-US) | setAttributeNodeNS (en-US) |
| getAttribute (DOM 1) | getAttributeNS (en-US) | getAttributeNode (en-US) | getAttributeNodeNS (en-US) |
| hasAttribute (DOM 2) | hasAttributeNS (en-US) | — | — |
| removeAttribute (DOM 1) | removeAttributeNS (en-US) | removeAttributeNode (en-US) | — |
Спецификации
- DOM Level 2 Core: getAttribute (представлено в DOM Level 1 Core)
- HTML 5: APIs in HTML documents
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Element.setAttribute()
Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.
Синтаксис
element.setAttribute(name, value);
- name — имя атрибута (строка).
- value — значение атрибута.
Пример
В следующем примере, setAttribute() используется, чтобы установить атрибут disabled кнопки , делая её отключённой.
button>Hello Worldbutton>
var b = document.querySelector("button"); b.setAttribute("disabled", "disabled");
Примечания
При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.
Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.
Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() (en-US) вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой «null» , которая, вероятно, не то, что вы хотите.
Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure(‘value’, val).
Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента , используйте null или пустое значение. Например: elt.setAttribute(‘autoplay’, »)
Методы DOM имеют дело с атрибутами элементов:
| Не знают пространства имён, наиболее часто используемые методы | Вариант, знающий пространство имён (Уровень DOM 2) | Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко) | Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко) |
|---|---|---|---|
| setAttribute (DOM 1) | setAttributeNS (en-US) | setAttributeNode (en-US) | setAttributeNodeNS (en-US) |
| getAttribute (DOM 1) | getAttributeNS (en-US) | getAttributeNode (en-US) | getAttributeNodeNS (en-US) |
| hasAttribute (DOM 2) | hasAttributeNS (en-US) | — | — |
| removeAttribute (DOM 1) | removeAttributeNS (en-US) | removeAttributeNode (en-US) | — |
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-setattribute① |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Получить значение атрибута класса элемента :
Дополнительные примеры «Попробуй сам» приведены ниже.
Определение и использование
Метод getAttribute() возвращает значение атрибута с указанным именем элемента.
Совет: Используйте метод getAttributeNode(), если вы хотите вернуть атрибут как объект Attr.
Поддержка браузера
| Метод | |||||
|---|---|---|---|---|---|
| getAttribute() | Да | Да | Да | Да | Да |
Синтаксис
element.getAttribute(attributename)
Параметр значений
| Параметр | Тип | Описание |
|---|---|---|
| attributename | String | Требуемый. Имя атрибута, из которого вы хотите получить значение |
Технические детали
Ещё примеры
Пример
Получить значение целевого атрибута элемента :
var x = document.getElementById(«myAnchor»).getAttribute(«target»);
Пример
Получить значение атрибута Событие onclick элемента :
var x = document.getElementById(«myBtn»).getAttribute(«onclick»);
Связанные страницы
Упражнения
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ
Сообщить об ошибке
Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:
Ваше предложение:
Спасибо, за вашу помощь!
Ваше сообщение было отправлено в SchoolsW3.
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание.Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого.Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности.Авторское право 1999 — 2022 Все права защищены.
Работает на W3.CSS.