Атрибут data-* тега <dir>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <dir>, однако важно отметить, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с data-атрибутами.
Важно: Элемент <dir> устарел в HTML5. Для хранения пользовательских данных используйте <ul> или <ol> с data-атрибутами.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir data-file-type="directory" data-created="2023-05-15">
<li data-file-type="document">report.txt</li>
<li data-file-type="image">photo.jpg</li>
</dir>
Современная альтернатива:
<ul class="file-system" data-type="directory" data-path="/documents">
<li data-type="file" data-extension="pdf">document.pdf</li>
<li data-type="directory" data-items="5">images</li>
</ul>
Доступ к данным через JavaScript:
<ul id="fileList" data-root="/user/docs">
<li data-size="245KB" data-modified="2023-06-20">report.docx</li>
</ul>
<script>
const list = document.getElementById('fileList');
console.log(list.dataset.root); // "/user/docs"
const firstItem = list.querySelector('li');
console.log(firstItem.dataset.size); // "245KB"
// Изменение данных
firstItem.dataset.modified = "2023-06-21";
</script>
Использование в CSS:
<style>
/* Стилизация элементов по данным */
li[data-type="directory"] {
font-weight: bold;
color: #2b6cb0;
}
li[data-type="file"]::before {
content: "📄 ";
}
li[data-type="directory"]::before {
content: "📁 ";
}
li[data-size$="KB"] {
opacity: 0.8;
}
</style>
<ul>
<li data-type="file" data-size="128KB">document.pdf</li>
<li data-type="directory">images</li>
</ul>
Рекомендации по именованию:
| Правило | Хороший пример | Плохой пример |
|---|---|---|
| Формат имен | data-file-size |
dataFileSize |
| Осмысленные имена | data-created-date |
data-d1 |
| Значения | data-type="image" |
data-type="123" |
Пример сложных данных:
<ul id="userFiles" data-options='{"sortBy":"name","view":"list"}'>
<li data-file-info='{"name":"report.pdf","size":"245KB"}'>report.pdf</li>
</ul>
<script>
const options = JSON.parse(document.getElementById('userFiles').dataset.options);
console.log(options.sortBy); // "name"
const fileInfo = JSON.parse(
document.querySelector('#userFiles li').dataset.fileInfo
);
console.log(fileInfo.size); // "245KB"
</script>
Примечание: Хотя data-атрибуты предоставляют удобный способ хранения дополнительной информации, не следует злоупотреблять ими для хранения больших объемов данных или сложных структур. Для сложных случаев лучше использовать JavaScript-объекты или специализированные хранилища данных.