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.
Как добавить атрибут элементу javascript
Не будем рассматривать все способы , используем id , как самый простой. вы можете выбрать любой способ обращения к тегу из тех способов обратиться к тегу, которые мы написали.
Для того, чтобы добавить атрибут тегу по его id . хм. давайте сделаем живой пример, с кнопкой!
Итак. у нас есть какой-то тег, без атрибута!
Далее сделаем кнопку с id
И ещё нам понадобится малюсенький скрипт, с помощью него мы обратиться к тегу и в наш тег поставим атрибут align с каким-то значением, пусть это будет center
button_id .onclick = function()
Результат добавления атрибута по нажатию кнопки
Для того, чтобы добавить атрибут тегу — нажмите на кнопку. добавить атрибут элементу
Здесь текст в теге без атрибута!
добавить атрибут элементу
Добавить атрибут id в тег
Является ли атрибутом идентификатор(id) — естественно! Тема перекочевала сюда
Добавить атрибут value в тег
Не будем заморачиваться по всем способам обратиться к тегу — будем использовать самый удобный(с моей точки зрения. ) Вы можете выбрать любой другой
Для того, чтобы добавить атрибут value нам потребуется какой-то input без атрибута.
Чтобы мы могли увидеть вживую пример добавления атрибута value нашему тегу, давайте сделаем кнопку, оп нажатию которой и добавиться атрибут!
И скрипт, который обработает нажати и добавит атрибут нашему тегу:
button_id_1 .onclick = function()
id_input.value=»Данное значение будет видно, после того, как добавится атрибут value»;
Соберем весь скрипт добавления атрибута элементу:
button_id_1 .onclick = function()
id_input.value=»Данное значение будет видно, после того, как добавится атрибут value»;
Результат работы скрипта, который добавляет атрибут элементу:
Чтобы добавить атрибут нашему input , нажмите на кнопку : добавить атрибут элементу добавить атрибут элементу
Добавить атрибут class в тег
Может ли класс(class) быть атрибутом как id!? Конечно!
У нас точно такая же ситуация с добавлением атрибута класса, мы также уже касались темы добавления атрибута класса к тегу/элементу.
Добавить атрибут placeholder в тег
Предположим, что нам нужно добавить атрибут placeholder в javascript, поступаем как под копирку! Берем выше созданный скрипт, вместе с тегом, вместе с кнопкой, вместе со скриптом, который добавляет атрибуты.
И вместо предыдущего атрибута ставим новый атрибут — в данном пункте — это новый атрибут placeholder
Код добавления атрибута placeholder в тег
button_id_2 .onclick = function()
id_input_2.placeholder=»Данное значение будет видно, после того, как добавится атрибут placeholder»;
Для того, чтобы посмотреть в живую пример добавления атрибута в тег — нажмите кнопку добавить атрибут!
добавить атрибут элементу
Добавить атрибут с помощью setAttribute в тег
Как добавить атрибут с помощью метода setAttribute!? Легко!
Добавим атрибут disabled — этот атрибут отвечает за то, чтобы сделать кнопку более не нажимаемой.
Для того, чтобы увидеть добавление атрибута с помощью setAttribute, вы должны нажать на кнопку!
Нажми на меня чтобы добавить атрибут с помощью setAttribute!
javascript добавить атрибут ко всем ссылкам
Тут интересный поисковый запрос — «javascript добавить атрибут ко всем ссылкам» — давайте напишем быстренько код, который будет добавлять всем ссылкам какой-то атрибут.
Сделаем кнопку, чтобы было видно добавление атрибутов ссылкам :
Добавим атрибут style с цветом красный — red
function send_atr()
var links = document.querySelectorAll(«a»);
links.forEach(link => link.setAttribute(‘ style ‘, ‘ color:red ‘);
>)
>
>
Добавим вторую кнопку изменим функцию и цвет, пусть это будет зеленый — green.
И две ссылки для наглядности.
Чтобы увидеть добавление всем ссылкам атрибута, нажимаете по кнопке;
как добавить атрибут js
Для добавления атрибута выбранному элементу используется метод setAttribute() . Первым параметром он принимает имя атрибута в виде строки, вторым — значение атрибута, также в виде строки.
// создаем ссылку const link = document.createElement('a'); // добавляем атрибут href link.setAttribute('href', 'https://ru.hexlet.io'); // добавляем атрибут target link.setAttribute('target', '_blank'); // добавляем текст ссылки link.textContent = 'Перейти'; // добавляем ссылку на страницу document.body.append(link); В результате мы получим следующий html -код:
href="https://ru.hexlet.io" target="_blank">Перейти Метод setAttribute — Добавление атрибута и изменение его значения
Метод setAttribute в JavaScript позволяет изменить значение атрибута элемента страницы или добавить элементу новый атрибут .
var any = document . getElementById ( «. » );
any . setAttribute ( «attribute» , «value» );
При помощи метода getElspanentById выбираем элемент страницы. Результат заносим в произвольную переменную any .
Через переменную any работаем с выбранным элементом как с объектом .
Метод setAttribute содержит 2 аргумента : имя атрибута attribute и его значение value .
Если атрибут уже существует , то его значение меняется на указанное. Если не существует , то к элементу добавляется новый атрибут с указанным значением.
Метод setAttribute — Добавление нового атрибута
Рассмотрим пример из предыдущей заметки, где мы работали с планетами, и теперь при помощи метода setAttribute добавим к одному из элементов страницы новый атрибут .
Фрагмент кода
Our Planet
«earth» > Green Planet
Red Planet
«mars» > Mars is red planet
var planet = document . getElementById ( «mars» );
planet . setAttribute ( «class» , «programm_red_17» );