HTML | data- * Атрибуты
Опубликовано: 3 Февраля, 2022
Настраиваемые атрибуты данных позволяют добавлять собственную информацию в теги HTML. Несмотря на то, что название предполагает иное, они не относятся к HTML5, и вы можете использовать атрибут data- * для всех элементов HTML.
Атрибуты data- * можно использовать для определения наших собственных пользовательских атрибутов данных. Он используется для хранения пользовательских данных в частном порядке на странице или в приложении.
Атрибуты данных состоят в основном из двух частей:
- Имя атрибута: должно состоять как минимум из одного символа, не содержать заглавных букв и иметь префикс «data-».
- Значение атрибута: может быть любой строкой.
Синтаксис:
<li data-book-author = "Rabindra Nath Tagore"> Гитанджали </li>
Example:
HTML
<!DOCTYPE html><html><head> <script> function showDetails(book) { var bookauthor = book.getAttribute("data-book-author"); alert(book.innerHTML + " is written by " + bookauthor + "."); } </script></head><body> <h1>Books</h1> <p>Click on the book name to know author"s name :</p> <ul> <li onclick="showDetails(this)" id="gitanjali" data-book-author="Rabindra Nath Tagore"> Gitanjali </li> <li onclick="showDetails(this)" id="conquest_of_self" data-book-author="Mahatma Gandhi"> Conquest of Self </li> <li onclick="showDetails(this)" id="broken_wings" data-book-author="Sarojini Naidu"> Broken Wings </li> </ul></body></html> |
Выход:
Когда мы нажимаем на книгу, мы видим имя автора в отдельном диалоговом окне.
Поддерживаемые браузеры: браузер, поддерживаемый HTML | data- * Атрибут
перечислены ниже:
- Гугл Хром
- Internet Explorer
- Fire Fox
- Сафари
- Опера