Атрибут id тега <meter>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <meter>. Этот идентификатор может использоваться для:
- Связи с элементами
<label>через атрибутfor - Обращения к элементу через JavaScript
- Стилизации конкретного элемента в CSS
- Якорных ссылок внутри страницы
<meter
id="battery-level"
min="0"
max="100"
value="75">
</meter>
<label for="battery-level">Уровень заряда батареи</label>
Основные правила для ID:
| Требование | Пример |
|---|---|
| Уникальность в пределах документа | id="cpu-meter" (не должно повторяться) |
| Должен начинаться с буквы | id="meter1" (не id="1meter") |
| Может содержать дефисы и подчёркивания | id="disk-meter", id="disk_meter" |
| Чувствительность к регистру | id="myMeter" ≠ id="mymeter" |
Пример с JavaScript:
<meter id="dynamic-meter" min="0" max="100" value="50"></meter>
<button onclick="updateMeter()">Обновить значение</button>
<script>
function updateMeter() {
const meter = document.getElementById('dynamic-meter');
const randomValue = Math.floor(Math.random() * 100);
meter.value = randomValue;
// Изменяем класс в зависимости от значения
meter.className = randomValue > 80 ? 'high' : randomValue < 20 ? 'low' : '';
}
</script>
Пример с CSS:
<style>
#custom-meter {
width: 300px;
height: 30px;
border-radius: 15px;
}
#custom-meter::-webkit-meter-bar {
background: #f0f0f0;
}
#custom-meter::-webkit-meter-optimum-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
}
</style>
<meter id="custom-meter" min="0" max="100" value="75"></meter>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение элемента
- Избегайте общих имен типа "meter1", "meter2"
- Для групповых элементов используйте классы, а не ID
- ID должен быть постоянным - не меняйте его динамически
Пример с якорной ссылкой:
<a href="#system-meter">Перейти к системному монитору</a>
<!-- ... другой контент ... -->
<meter
id="system-meter"
min="0"
max="100"
value="85">
</meter>
<p>Загрузка системы: 85%</p>
Ограничения и совместимость:
- Поддерживается всеми браузерами без исключений
- Дублирование ID может привести к ошибкам в JavaScript
- Специальные символы в ID могут требовать экранирования в CSS
- В HTML5 нет ограничений на длину ID, но разумно использовать краткие имена
Примечание: Хотя атрибут id очень полезен для отдельных элементов <meter>, для группы однотипных индикаторов лучше использовать классы. ID идеально подходит для ключевых элементов управления, которые требуют точного целевого обращения из JavaScript.