Как через js добавить атрибут в тег html

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.

Как через js добавить атрибут в тег html

Не будем рассматривать все способы , используем 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">Перейти 

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр

Можно добавить и новую функцию:

document.body.sayHi = function() < alert( this.nodeName ); >document.body.sayHi(); // BODY, выполнилась с правильным this

Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.

Обратим внимание, пользовательские DOM-свойства:

• Могут иметь любое значение.
• Названия свойств чувствительны к регистру.
• Работают за счёт того, что DOM-узлы являются объектами JavaScript.

Атрибуты

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

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

Доступ к атрибутам осуществляется при помощи стандартных методов:

• elem.hasAttribute(name) – проверяет наличие атрибута
• elem.getAttribute(name) – получает значение атрибута
• elem.setAttribute(name, value) – устанавливает атрибут
• elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr.

В отличие от свойств, атрибуты:

• Всегда являются строками.
• Их имя нечувствительно к регистру (ведь это HTML)
• Видны в innerHTML (за исключением старых IE)

Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:

Пример ниже устанавливает атрибуты и демонстрирует их особенности.

  alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен elem.setAttribute('Test', 123); // (2) атрибут Test установлен alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты! var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов for (var i = 0; i 

При запуске кода выше обратите внимание:

1. getAttribute(‘About’) – первая буква имени атрибута About написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.
2. Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.
3. После добавления атрибута его можно увидеть в innerHTML элемента.
4. Коллекция attributes содержит все атрибуты в виде объектов со свойствами name и value .

Когда полезен доступ к атрибутам?

Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.

Например, свойства тега ‘A’ описаны в спецификации DOM: HTMLAnchorElement.

Например, у него есть свойство «href» . Кроме того, он имеет «id» и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement.

Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.

Рассмотрим несколько примеров.

Ссылка «как есть» из атрибута href

Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.

Для примера, посмотрим, что произойдёт с атрибутом «href» при изменении свойства:

Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C, должно быть полной ссылкой.

Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.

Есть и другие подобные атрибуты

Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.

Работа с checked через атрибут и свойство:

То есть, изменение DOM-свойства value на атрибут не влияет, он остаётся таким же.

А вот изменение атрибута обновляет свойство:

Эту особенность можно красиво использовать.

Получается, что атрибут input.getAttribute('value') хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.

Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.

Классы в виде строки: className

Атрибуту "class" соответствует свойство className .

Так как слово "class" является зарезервированным словом в JavaScript, то при проектировании DOM решили, что соответствующее свойство будет называться className .

Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( ) соответствует свойство с названием htmlFor .

Классы в виде объекта: classList

Атрибут class – уникален. Ему соответствует аж целых два свойства!

Работать с классами как со строкой неудобно. Поэтому, кроме className , в современных браузерах есть свойство classList .

Свойство classList – это объект для работы с классами.

Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку classList.js.

• elem.classList.contains("class") – возвращает true/false , в зависимости от того, есть ли у элемента класс class .
• elem.classList.add/remove("class") – добавляет/удаляет класс class
• elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.

Кроме того, можно перебрать классы через for , так как classList – это псевдо-массив.

Нестандартные атрибуты

У каждого элемента есть некоторый набор стандартных свойств, например для это будут href , name , а для это будут src , alt , и так далее.

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

Для нестандартных атрибутов DOM-свойство не создаётся.

Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.

То есть, если назначить элементу атрибут href , то свойство img.href от этого не появится. Как, впрочем, и если назначить ссылке атрибут alt :

Нестандартные атрибуты иногда используют для CSS.

В примере ниже для показа «состояния заказа» используется атрибут order-state :

 .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] 
Новый заказ.
 
Ожидающий заказ.
 
Заказ отменён.
 

Почему именно атрибут? Разве нельзя было сделать классы .order-state-new , .order-state-pending , order-state-canceled ?

Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.

Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:

div.setAttribute('order-state', 'canceled');

Для классов – нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:

div.classList.remove('order-state-new'); div.classList.add('order-state-canceled');

…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.

Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.

Свойство dataset, data-атрибуты

С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.

Как правило, это делается при помощи атрибутов с названиями, начинающимися на data- , например:

 
По улице прошёлся слон. Весьма красив и толст был он.
  

Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.

При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset :

 
По улице прошёлся слон. Весьма красив и толст был он.
  

Обратим внимание – название data-user-location трансформировалось в dataset.userLocation . Дефис превращается в большую букву.

Полифил для атрибута hidden

Для старых браузеров современные атрибуты иногда нуждаются в полифиле. Как правило, такой полифил включает в себя не только JavaScript, но и CSS.

Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:

 [hidden] 
Текст
  
  

Если запустить в IE11- пример выше, то будет скрыт, а вот последний div , которому поставили свойство hidden в JavaScript – по-прежнему виден.

Это потому что CSS «не видит» присвоенное свойство, нужно синхронизировать его в атрибут.

Вот так – уже работает:

 [hidden]  
Текст
  
  

«Особенности» IE8

Если вам нужна поддержка этих версий IE – есть пара нюансов.

Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:

document.body.setAttribute('my', 123); alert( document.body.my ); // 123 в IE8-

Вывод из этого довольно прост – чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.

Итого

• Атрибуты – это то, что написано в HTML.
• Свойство – это то, что находится внутри DOM-объекта.

Таблица сравнений для атрибутов и свойств:

Свойства	Атрибуты
Любое значение	Строка
Названия регистрозависимы	Не чувствительны к регистру
Не видны в innerHTML	Видны в innerHTML

Синхронизация между атрибутами и свойствами:

• Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
• Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде checked , selected всегда имеют значение true/false , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например href .

• Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать getAttribute .
• Атрибуты, название которых начинается с data- , можно прочитать через dataset . Эта возможность не поддерживается IE10-.

Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.

А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:

1. Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
2. Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, .
3. Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция attributes .

Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на data- валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство dataset .

Задачи

Поставьте класс ссылкам

важность: 3

Сделайте жёлтыми внешние ссылки, добавив им класс external .