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

Атрибуты и 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 ); // Пётр

Element: метод setAttribute()

Метод setAttribute() интерфейса Element устанавливает значение атрибута для указанного элемента. Если атрибут уже существует, то его значение будет обновлено, а если нет, то будет добавлен атрибут с соответствующим именем и значением.

Для получения текущего значения атрибута используйте getAttribute() , для удаления нужно вызвать removeAttribute() .

Если необходимо поработать с атрибутами узла (например, при клонировании другого элемента) перед его добавлением, можно использовать метод setAttributeNode() (en-US).

Синтаксис

setAttribute(name, value) 

Параметры

Строка, представляющая имя атрибута, для которого устанавливается значение. Имя атрибута автоматически преобразуется в нижний регистр если setAttribute() вызывается для HTML-элемента в HTML-документе.

Строка, содержащая значение для установки. Любое нестроковое значение автоматически преобразуется в строку.

Логические атрибуты считаются равными true , если они есть у элемента, вне зависимости от значения. Следует устанавливать в качестве значения для value пустую строку ( «» ) или имя атрибута без пробелов в начале и конце. Смотрите пример ниже для наглядной демонстрации.

Поскольку значение value преобразуется в строку, присвоение значения null не приводит к удалению атрибута или установке его значения в null . Вместо этого произойдёт установка значения равного строке «null» . Для удаления атрибута необходимо вызвать removeAttribute() .

Возвращаемое значение

Исключения

Возникает если значение name не является корректным именем XML (например, начинается с цифры, дефиса или точки или содержит символы, отличные от буквенно-цифровых символов, символов подчеркивания, дефисов и точек).

Примеры

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

HTML

button>Привет, мир!button> 

button  height: 30px; width: 100px; margin: 1em; > 

JavaScript

const button = document.querySelector("button"); button.setAttribute("name", "helloButton"); button.setAttribute("disabled", ""); 

Этот пример иллюстрирует два аспекта:

• Первый вызов setAttribute() изменяет значение атрибута name на «helloButton». Это можно увидеть с помощью инспектора кода в браузере (Chrome, Edge, Firefox, Safari).
• Используемое значение при установке логического атрибута не важно. Само наличие атрибута означает, что он равен true , а отсутствие — false . Таким образом, присваивая значению атрибута disabled пустую строку ( «» ), мы переключаем disabled в true , что приводит к отключению кнопки. В качестве значения для логических атрибутов рекомендуется использовать пустую строку или имя самого атрибута.

Спецификации

Specification
DOM Standard # ref-for-dom-element-setattribute①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute() (en-US)

как добавить атрибут 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">Перейти 

Использование data-* атрибутов

HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .

Синтаксис HTML

Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:

article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article> 

Доступ в JavaScript

Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).

Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .

Доступ в CSS

Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr() :

article::before  content: attr(data-parent); > 

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

article[data-columns="3"]  width: 400px; > article[data-columns="4"]  width: 600px; > 

Увидеть как это работает можно в примере на JSBin.

Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

Проблемы

Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .

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

Смотрите также

• This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
• How to use HTML5 data attributes (Sitepoint)