Атрибут data-* тега <ins>
Описание
Пользовательские атрибуты data-* позволяют хранить дополнительную информацию в теге <ins>. Эти атрибуты не влияют на отображение, но могут быть использованы JavaScript для различных целей.
<p>
Цена изменена:
<ins data-change-id="C123" data-author="john.doe" data-reason="promotion">
$49.99
</ins>
(было $59.99)
</p>
Основные возможности:
| Атрибут | Пример | Использование |
|---|---|---|
data-id |
data-id="U123" |
Уникальный идентификатор изменения |
data-author |
data-author="user123" |
Автор правки |
data-timestamp |
data-timestamp="1637424000" |
Время изменения в Unix-формате |
data-* |
data-version="2.1" |
Любые пользовательские данные |
Пример с обработкой данных в JavaScript:
<p>
Последнее изменение:
<ins id="last-change" data-change-type="price" data-old-value="100" data-new-value="90">
$90
</ins>
</p>
<script>
const change = document.getElementById('last-change');
console.log('Тип изменения:', change.dataset.changeType);
console.log('Старое значение:', change.dataset.oldValue);
console.log('Новое значение:', change.dataset.newValue);
// Добавляем всплывающую подсказку
change.title = `Изменено с ${change.dataset.oldValue} на ${change.dataset.newValue}`;
</script>
Рекомендации:
- Используйте осмысленные имена атрибутов после
data- - Храните только строковые данные (для сложных объектов используйте JSON)
- Сочетайте с атрибутами
datetimeиcite - Не злоупотребляйте - только для данных, связанных с элементом
- Используйте kebab-case для имен атрибутов
Пример с JSON данными:
<div>
История изменений:
<ins data-change-info='{"id":"C123","author":"jane","date":"2025-11-21"}'>
Обновлен раздел контактов
</ins>
</div>
<script>
const change = document.querySelector('[data-change-info]');
const info = JSON.parse(change.dataset.changeInfo);
console.log('Детали изменения:', info);
</script>
Ограничения:
- Данные доступны только через JavaScript
- Значения всегда строковые (нужно преобразовывать)
- Не предназначены для стилизации (используйте классы)
- Не заменяют семантические атрибуты
Примечание: Пользовательские атрибуты data-* особенно полезны для систем с отслеживанием изменений, где нужно хранить метаданные о правках без их визуального отображения. Для сложных сценариев рассмотрите использование специализированных атрибутов или data-хранилищ.