Атрибут id тега <progress>
Описание
Атрибут id для тега <progress> задаёт уникальный идентификатор элемента прогресс-бара на странице. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обращений или как якорная ссылка.
<progress id="fileUploadProgress" value="35" max="100">35%</progress>
Основные характеристики:
| Аспект | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Za-z), может содержать цифры, дефисы и подчёркивания |
| Регистр | Чувствителен к регистру (uploadProgress ≠ Uploadprogress) |
Использование с CSS:
<style>
#fileUploadProgress {
width: 100%;
height: 25px;
border-radius: 12px;
}
#fileUploadProgress::-webkit-progress-value {
background-color: #4CAF50;
border-radius: 12px;
}
</style>
<progress id="fileUploadProgress" value="65" max="100">65%</progress>
Использование с JavaScript:
<progress id="dynamicProgress" value="0" max="100">0%</progress>
<script>
// Получение элемента
const progressBar = document.getElementById('dynamicProgress');
// Обновление значения
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.textContent = newValue + '%';
}
// Пример использования
updateProgress(75);
</script>
Рекомендации:
- Используйте семантичные имена (например, "imageUploadProgress" вместо "progress1")
- Избегайте избыточных префиксов (не нужно "progressFileUpload", достаточно "fileUpload")
- Для стилизации предпочтительнее использовать классы
- Храните согласованность именования в проекте
Пример с обработкой событий:
<progress id="interactiveProgress" value="50" max="100">50%</progress>
<script>
document.getElementById('interactiveProgress').addEventListener('click', function() {
this.value = (this.value + 10) % 110;
this.textContent = this.value + '%';
});
</script>
Особенности работы:
- Позволяет точно адресовать конкретный прогресс-бар
- Не влияет на функциональность элемента по умолчанию
- Обязателен для сложных интерактивных сценариев
Примечание: Хотя атрибут id полезен для управления отдельными элементами, для групп однотипных прогресс-баров (например, в списке загрузок) лучше использовать классы в сочетании с data-атрибутами.