Содержание

.dataset — JavaScript — Дока

Кратко

Скопировано

Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.

Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data-, например data-testid. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

Как пишется

Скопировано

Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data-. Например, если атрибут называется data-columns, то поле в объекте для этого атрибута будет называться columns.

<h2>Известные ситхи</h2><ul>  <li data-id="1541" data-episode="1">Дарт Мол</li>  <li data-id="9434" data-episode="4">Дарт Вейдер</li>  <li data-id="5549" data-episode="4">Дарт Сидиус</li></ul>
          <h2>Известные ситхи</h2>
<ul>
  <li data-id="1541" data-episode="1">Дарт Мол</li>
  <li data-id="9434" data-episode="4">Дарт Вейдер</li>
  <li data-id="5549" data-episode="4">Дарт Сидиус</li>
</ul>

const items = document.
 
 querySelectorAll('li')const firstItem = items[0]console.log(firstItem.dataset)// { id: '1541', episode: '1' }
          const items = document.querySelectorAll('li')
const firstItem = items[0]
console.log(firstItem.dataset)
// { id: '1541', episode: '1' }

Если дата-атрибутов на элементе нет, то вернётся пустой объект:

const heading = document.querySelector('h2')console.log(heading.dataset)// {}
          const heading = document.querySelector('h2')
console.log(heading.dataset)
// {}

Чтобы добавить дата-атрибут к элементу, нужно добавить новое поле в объект dataset. Название поля так же должно быть без префикса data-

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

Возьмём тот же HTML из примера выше и добавим дата-атрибуты ко второму элементу:

const items = document.querySelectorAll('li')const secondItem = items[1]secondItem. dataset.side = 'evil'secondItem.dataset.age = 46secondItem.dataset.lightsaber = { color: 'red' }
          const items = document.querySelectorAll('li')
const secondItem = items[1]
secondItem.dataset.side = 'evil'
secondItem.dataset.age = 46
secondItem.dataset.lightsaber = { color: 'red' }

В результате получим такой элемент:

<li  data-id="9434"  data-episode="4"  data-side="evil"  data-age="46"  data-lightsaber="[object Object]">  Дарт Вейдер</li>
          <li
  data-id="9434"
  data-episode="4"
  data-side="evil"
  data-age="46"
  data-lightsaber="[object Object]">
  Дарт Вейдер
</li>

Все не строковые значения установленные в dataset будут приводиться к строке. Поэтому объект превращается в [object Object], а число 46 превращается в строку "46".

Если в dataset добавить поле с пустым значением, то в HTML будет создан дата-атрибут без значения.

Использование camelCase и kebab-case

Скопировано

В dataset необходимо присваивать поля, название которых записывается в одно слово. Потому для составных имён используется только camelCase нотация. При попытке присвоить название в kebab-case будет выброшена ошибка.

const body = document.querySelector('body')body.dataset['dark-theme'] = true// Uncaught DOMException: Failed to set// a named property on 'DOMStringMap':// 'dark-theme' is not a valid property name.
          
 
const body = document.querySelector('body')
body.dataset['dark-theme'] = true
// Uncaught DOMException: Failed to set
// a named property on 'DOMStringMap':
// 'dark-theme' is not a valid property name.

Дата-атрибуты, записанные в dataset с помощью camelCase, в HTML будут иметь названия в kebab-case. Браузер преобразует camelCase в kebab-case:

<ul>  <li>Иван Иванов</li></ul>
          
 
<ul>
  <li>Иван Иванов</li>
</ul>

const item = document.querySelector('li')item.dataset.yearsOfExperience = 2item.dataset.candidateRole = 'junior'
          const item = document.querySelector('li')
item.dataset.yearsOfExperience = 2
item.dataset.candidateRole = 'junior'

После выполнения кода выше получится следующий HTML:

<ul>  <li data-candidate-role="junior" data-years-of-experience="2">Иван Иванов</li></ul>
          <ul>
  <li data-candidate-role="junior" data-years-of-experience="2">Иван Иванов</li>
</ul>

Преобразование названий работает и в обратную сторону – дата-атрибут на HTML-элементе, записанный в

kebab-case, будет превращён в dataset в camelCase.

<ul>  <li data-candidate-role="junior">Иван Иванов</li></ul>
          <ul>
  <li data-candidate-role="junior">Иван Иванов</li>
</ul>

const item = document.querySelector('li')console.log(item.dataset)// { candidateRole: 'junior' }
          const item = document.querySelector('li')
console.log(item.dataset)
// { candidateRole: 'junior' }

Удаление дата-атрибута

Скопировано

Удалить дата-атрибут можно только с помощью оператора delete. Если попытаться присвоить к полю значение undefined или null, то браузер просто присвоит атрибуту строку 'undefined' или 'null'.

Возьмём следующий HTML:

<div data-testid="test">Любое содержимое<div>
          <div data-testid="test">Любое содержимое<div>

При установке undefined в значение дата-атрибута, он не удалится с элемента.

const element = document.querySelector('div')element.dataset.testid = undefined
          
 
const element = document.querySelector('div')
element.dataset.testid = undefined

В результате получится следующий HTML:

<div data-testid="undefined">Любое содержимое<div>
          <div data-testid="undefined">Любое содержимое<div>

Если использовать оператор delete, то получим элемент без дата-атрибута.

delete element.dataset.testid
          delete element.dataset.testid

<div>Любое содержимое</div>
          <div>Любое содержимое</div>

Свойство dataset защищено от перезаписи. Это значит что попытка присвоить в

dataset новое значение будет проигнорирована.

const element = document.querySelector('div')// Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятсяelement.dataset = {}element. dataset = 'string'
          const element = document.querySelector('div')
// Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятся
element.dataset = {}
element.dataset = 'string'

Как понять

Скопировано

Дата-атрибуты появились в HTML5 и добавили возможность разработчикам добавлять свои собственные атрибуты к элементам. Причин для использования таких атрибутов можно придумать множество, чаще всего в дата-атрибутах хранят нужные значения, которые используют в CSS или JavaScript.

Дата-атрибуты были созданы специально для того, чтобы хранить и работать с данными прямо в HTML. Отсюда и префикс data, что в переводе значит данные. Например, с помощью дата-атрибутов можно хранить значение выбранное в селекте прямо на элементе.

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

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

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

Браузер даёт возможность управлять дата-атрибутами через специальное API dataset.

На практике

Скопировано

Егор Огарков советует

Скопировано

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

[data-id] {  /* Селектор для всех элементов с data-id */}[data-id="123"] {  /* Селектор только для элементов с data-id="123" */}
          [data-id] {
  /* Селектор для всех элементов с data-id */
}
[data-id="123"] {
  /* Селектор только для элементов с data-id="123" */
}

Найти элемент с data-id="123":

const element = document. querySelector('[data-id="123"]')
          const element = document.querySelector('[data-id="123"]')

🛠 Некоторые фреймворки во время компиляции самостоятельно генерируют дата-атрибуты и присваивают их к элементам, чтобы делать изоляцию CSS.

🛠 Дата-атрибуты широко используются в автоматизированном тестировании. Для этого на необходимых элементах расставляют дата-атрибуты и тест обращается к ним. В документациях к различным библиотекам для тестирования часто можно встретить атрибут data-testid.

Использование data-атрибутов в HTML, CSS, JavaScript и jQuery

Вы здесь: Главная » JavaScript » Использование data-атрибутов в HTML, CSS, JavaScript и jQuery

HTML5 в своем стандарте принес немало нового, и одним из таких новшеств стала возможность добавлять любые пользовательские атрибуты в разметку страницы с использованием волшебной приставки, или префикса data-, т.е. данные

. Причем использовать эти данные вы можете как в CSS, так и в JavaScript.

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

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

Например, атрибуты data-text-top и data-text-bottom в разметке ниже нужны для того, чтобы использовать текст в них сверху и снизу в выезжающих при наведении на фото псевдоэлементах ::before и ::after, соответственно.

html-разметка блока с data-атрибутами

<div> <div data-text-top=»17 years» data-text-bottom=»of experience»> <img src=»https://source.unsplash.com/LrS0c_v30RQ/330×400″ alt=»»> </div> <h4>Nick Borrow</h4> <div>Founder</div> <p>Debitis dolorem nam magnam distinctio in, tempore, sapiente recusandae. </p> </div>

1

2

3

4

5

6

7

8

<div>

<div data-text-top=»17 years» data-text-bottom=»of experience»>

<img src=»https://source.unsplash.com/LrS0c_v30RQ/330×400″ alt=»»>

</div>

<h4>Nick Borrow</h4>

<div>Founder</div>

<p>Debitis dolorem nam magnam distinctio in, tempore, sapiente recusandae.</p>

</div>

Результат использования data-атрибутов в HTML и CSS можно посмотреть ниже. Для этого нужно навести курсор мыши на любое изображение.

See the Pen by Elen (@ambassador) on CodePen.0

Работу этого кода невозможно представить без использования свойства transition для анимации при наведении на картинку или блок. Плюс для свойства content, обязательного для псевдоэлементов ::before и ::after, можно задать функцию attr(data-text-top), указав в скобках любой data- или другой атрибут вместо  data-text-top.

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

Однако, это еще не все. В том случае, когда часть информации должна быть некоторое время скрыта от пользователя, очень легко ее спрятать в data-атрибуты, а затем «вытащить» с помощью JavaScript или jQuery. Именно так поступают разработчики многих плагины фотогалерей или слайдеров. Например, чтобы добавить просмотр изображения в модальном окне в фотогалерее Fancybox, нужно в разметке указать атрибут data-fancybox, а атрибут data-caption используется для вывода заголовка под изображением:

Использование data-атрибутов в html-разметке для jQuery-плагина Fancybox

<div> <a href=»https://source. unsplash.com/F88jkCoSVx0/900×600″ data-fancybox=»mygallery» data-caption=»Wooman on the Beach»> <img src=»https://source.unsplash.com/F88jkCoSVx0/300×200″ alt=»Wooman on the Beach» /> </a> <a href=»https://source.unsplash.com/D3cC-j2-pP4/600×900″ data-fancybox=»mygallery» data-caption=»Mayamy Beach»> <img src=»https://source.unsplash.com/D3cC-j2-pP4/300×200″ alt=»Mayamy Beach» /> </a> </div>

1

2

3

4

5

6

7

8

<div>

  <a href=»https://source.unsplash.com/F88jkCoSVx0/900×600″ data-fancybox=»mygallery» data-caption=»Wooman on the Beach»>

    <img src=»https://source.unsplash.com/F88jkCoSVx0/300×200″ alt=»Wooman on the Beach» />

  </a>

  <a href=»https://source.unsplash.com/D3cC-j2-pP4/600×900″ data-fancybox=»mygallery» data-caption=»Mayamy Beach»>

   <img src=»https://source. unsplash.com/D3cC-j2-pP4/300×200″ alt=»Mayamy Beach» />

  </a>

</div>

И это все, что нужно сделать для работы плагина, не считая подключения файлов jQuery и файлов самого плагина Fancybox.

Ранее для аналогичных целей разработчики часто использовали атрибут class или создавали нестандартные атрибуты, но атрибут class на самом деле не предназначен для этого, да и на нестандартную разметку «ругается» валидатор W3C. С введением же data-атрибутов в HTML5 сохранять и извлекать пользовательские данные из HTML стало действительно легко и приятно, тем более, что для этого есть свойства и методы как в JavaScript, так и в jQuery. Рассмотрим их подробнее.

Доступ к data-атрибутам с помощью нативного JavaScript

Классический JavaScript называют еще нативным или ванильным. С появлением HTML5 его ядро дополнилось свойством dataset, которое как раз и позволяет манипулировать значениями data-атрибутов. Кроме того, уже очень давно в JS существует метод getAttribute(), который дает нам возможность получить любой атрибут, причем не только с приставкой data-, но и такие известные, как src у изображения или href у ссылки.

Рассмотрим эти способы нативнного JavaScript подробнее.

Свойство HTMLElement.dataset

Свойство  dataset (набор данных в переводе с английского) позволяет легко получить доступ к атрибутам данных любого html-элемента. Рассмотрим следующий пример.

See the Pen
data-attribute JavaScript control by Elen (@ambassador)
on CodePen.0

В каждый элемента <li> мы добавили ряд data-атрибутов, а именно data-speciality, data-age, data-phone-number, значения которых используется для хранения данных о каждом сотруднике. В скрипте мы добавили для всех элементов <li> обработчик события клика   (emploee.addEventListener('click', function() {...})) .

Функция, описанная в нем, позволяет вывести данные о сотруднике, формируя вложенный список для существующего элемента <li>, по которому был сделан щелчок, с помощью свойства innerHTML. В этой функции мы проверяем, есть ли атрибут data-name у элемента и, в случае, если его нет, создаем такой атрибут динамически, и используем его при добавлении вложенного списка. Заодно этот атрибут служит для того, чтобы убрать лишнюю информацию при повторном клике.

Как работает свойство
dataset?

Когда вы выбираете отдельные свойства с помощью dataset, префикс data- удаляется из названия атрибута. Если data-атрибут содержит одно слово после префикса data-, то именно оно указывается после этого свойства с маленькой буквы (в нижнем регистре) , например, dataset. age для атрибута data-age или dataset.speciality для data-speciality. Если же в data-атрибуте содержится несколько слов, разделенные черточками (дефисами), то черточки удаляются, и свойство записывается в стиле camelCase, т.е. первое слово с маленькой буквы, а каждое следующее слово с заглавной буквы. В нашем примере так записывается  атрибут data-phone-number — он преобразуется в dataset.phoneNumber. Аналогичным образом в JavaScript записываются стилевые свойства элементов.

Обратите внимание, что в скрипте свойство dataset.name используется как для получения значения соответствующего атрибута data-name, так и для назначения этого атрибута и его значения, когда такого атрибута в разметке нет. В нашем примере это data-name. Для удаления этого атрибута в коде мы использовали оператор delete.

Методы getAttribute()/setAttribute()

Теперь давайте посмотрим, как можно использовать метод getAttribute('attribute') для получения значения data-атрибутов и метод setAttribute('attribute', 'value') для добавления data-атрибута с нужным значением. Перепишем код примера, представленного выше.

See the Pen
data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.0

В чем заключается разница? Во-первых, getAttribute() — это метод, и значение атрибута в нем передается в скобках в виде строки (т.е. в кавычках). Во-вторых,  в скобках нужно передать полное имя атрибута вместе с префиксом data-, чтобы получить значение атрибута. Т.е. для data-phone-number нужно записать getAttribute('data-phone-number'), не изменяя регистр символов и не убирая префикс data-.

Доступ к атрибутам данных с помощью jQuery. Метод data()

Конечно же, библиотека jQuery не могла обойти своим вниманием доступ и изменение data-атрибутов. Для этого в ней есть метод data(), чтобы добавить новый или изменить существующий data-атрибут, а также метод removeData() для удаления data-атрибута. Давайте рассмотрим наш пример, но в синтаксисе jQuery. Напомню, что для этого обязательно нужно сначала подключить эту библиотеку.

See the Pen
data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.0

Как нетрудно заметить, в коде метод data() используется очень часто, причем в скобках в кавычках, т.е. в строковом виде, мы указываем только название data-атрибута после черточки, без префикса data-. Для того чтобы удалить значение атрибута data-name, в коде используется метод removeData('name').

Еще хотелось бы обратить внимание на атрибут data-phone-number. Он может быть записан как с использованием черточки в виде строки data('phone-number'), так и сторокой в camelCase-синтаксисе в виде data('phoneNumber'). Попробуйте сами изменить его запись, перейдя к редактированию кода на codepen.io при нажатии кнопки .

Пример решения задачи с составными условиями и data-атрибутами

В статье «Простые задачи по JavaScript» вы можете найти задачу на составные условия, в которой нужно написать код, проверяющий ответы пользователя на 4 вопроса  и предлагающий ему определенные книги. Задачу можно решить с помощью ряда условий if…else, использования массивов объектов и методов для работы с массивами, но также можно сделать список с data-атрибутами, имеющими значение 0 или 1. А список вопросов представить с помощью нескольких флажков. Вариант решения будет таким:

See the Pen Составные условия JavaScript by Elen (@ambassador) on CodePen.0

Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.

Просмотров: 2 972

Данные HTML-* Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

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

Атрибут data-* дает нам возможность встраивать пользовательские атрибуты данных в все HTML-элементы.

Сохраненные (пользовательские) данные затем можно использовать в JavaScript страницы для создания более привлекательный пользовательский интерфейс (без каких-либо вызовов Ajax или серверной базы данных запросы).

Атрибут data-* состоит из двух частей:

  1. Имя атрибута не должно содержать заглавных букв и должно быть не менее одного символа после префикса «data-»
  2. Значением атрибута может быть любая строка

Примечание. Пользовательские атрибуты с префиксом «data-» будут полностью игнорируется пользовательским агентом.

Относится к

Атрибут data-* является глобальным атрибутом и может использоваться в любом элементе HTML.

Элемент Атрибут
Все элементы HTML данные-*

Пример

Пример

Используйте атрибут data-* для встраивания пользовательских данных:


     
  • Owl

    •  
  • Лосось

    •  
  • Тарантул

Попробуйте сами »

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
данные-* 4,0 5,5 2,0 3. 1 9,6

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Атрибуты данных в JavaScript

19 октября 2020 г.

JavaScript

Одним из лучших способов хранения данных в HTML является использование атрибутов данных. Эти атрибуты данных можно использовать для выполнения некоторых довольно интересных вещей в CSS без использования JavaScript, как показано в этой статье, но атрибуты данных наиболее полезны в сочетании с JavaScript. В этой статье я научу вас, как именно использовать атрибуты данных в JavaScript и что делает их такими мощными.

Введение в атрибуты данных

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

Чтение атрибутов данных

Теперь у нас есть div с тремя пользовательскими атрибутами данных. Теперь давайте перейдем к JavaScript, чтобы посмотреть, как мы будем получать доступ к этим атрибутам данных.

Набор данных для элемента вернет DOMStringMap , который по сути является просто объектом, содержащим все пользовательские атрибуты данных элемента. Наш набор данных выглядит так.

Вы заметите две интересные вещи.

Во-первых, все наши свойства преобразуются из регистра змеи, имя , в случай верблюда, имя . Это связано с тем, что в JavaScript свойства объекта в основном записываются в верблюжьем регистре, что значительно упрощает работу с объектом JavaScript.

Во-вторых, свойство active имеет значение "" . Это связано с тем, что предполагается, что любой атрибут данных без значения имеет в качестве значения пустую строку.

Теперь, чтобы получить доступ к отдельному атрибуту данных, мы просто обращаемся к нему, как к свойству объекта, поскольку набор данных — это просто объект.

Запись атрибутов данных

Чтобы создать новый атрибут данных в JavaScript, нам просто нужно добавить новое свойство в набор данных объект со значением.

Это обновит объект набора данных и наш HTML, что означает, что наш HTML будет выглядеть так.

Обновление атрибутов данных

Допустим, теперь мы хотим обновить значение атрибута данных. Это невероятно просто, поскольку работает так же, как обычный объект. Нам просто нужно установить значение свойства нашего набора данных в новое значение, и оно обновит HTML для нас.

Это обновит объект набора данных и наш HTML, что означает, что наш HTML будет выглядеть так.

Удалить атрибуты данных

Удаление атрибутов данных немного отличается, поскольку нам нужно фактически удалить свойство из нашего объекта. Это связано с тем, что если мы попытаемся установить значение undefined или null , объект набора данных по-прежнему будет иметь ссылку на это свойство с этим значением undefined или null и установит значение наших данных HTML. атрибут строки null или undefined .

Чтобы удалить элемент, нам нужно использовать ключевое слово delete , чтобы полностью удалить его из объекта.

Это обновит объект набора данных и наш HTML, что означает, что наш HTML будет выглядеть так.

Пример из реального мира

Теперь давайте объединим все это в пример из реального мира. Допустим, у вас есть следующий HTML.

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

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

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

Итак, теперь у нас есть способ получить доступ к идентификатору модального окна, связанного с каждой кнопкой внутри JavaScript.

В приведенном выше коде мы выбираем все элементы, которые содержат наш пользовательский data-modal-id атрибут.

No related posts.