Атрибут style тега <meter>
Описание
Атрибут style позволяет задавать CSS-стили непосредственно для элемента <meter>. Эти стили применяются с наивысшим приоритетом (инлайново) только к этому конкретному элементу.
<meter
style="width: 300px; height: 25px; margin: 10px 0;"
min="0"
max="100"
value="75">
</meter>
Особенности применения:
| Свойство | Пример | Эффект |
|---|---|---|
| width/height | width: 200px; height: 20px; |
Размеры индикатора |
| margin/padding | margin: 10px; padding: 5px; |
Внешние и внутренние отступы |
| accent-color | accent-color: #4CAF50; |
Цвет заполнения (новые браузеры) |
| background | background: #f0f0f0; |
Фон индикатора |
Пример с псевдоэлементами (браузерные префиксы):
<style>
/* Стилизация фона индикатора */
meter::-webkit-meter-bar {
background: #f0f0f0;
border-radius: 10px;
}
/* Стилизация заполненной части */
meter::-webkit-meter-optimum-value {
background: linear-gradient(to right, #4CAF50, #8BC34A);
border-radius: 10px;
}
</style>
<meter
style="width: 100%; height: 20px;"
min="0"
max="100"
value="65">
</meter>
Динамическое изменение стилей через JavaScript:
<meter
id="dynamic-style-meter"
min="0"
max="100"
value="50">
</meter>
<button onclick="changeMeterStyle()">Изменить стиль</button>
<script>
function changeMeterStyle() {
const meter = document.getElementById('dynamic-style-meter');
meter.style.accentColor = getRandomColor();
meter.style.height = '30px';
meter.style.boxShadow = '0 0 5px rgba(0,0,0,0.2)';
}
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
</script>
Рекомендации по использованию:
- Используйте для разовых стилевых правок
- Избегайте сложных стилей в атрибуте - выносите в CSS-классы
- Для кросс-браузерной стилизации meter используйте префиксы
- Инлайновые стили имеют наивысший приоритет (переопределяют другие стили)
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Стилизация элемента <meter> ограничена в разных браузерах
- Для сложной стилизации может потребоваться JavaScript-полифил
- Инлайновые стили сложно поддерживать в больших проектах
Примечание: Хотя атрибут style удобен для быстрого прототипирования, в production-коде рекомендуется использовать CSS-классы. Для элементов <meter> особенно важно учитывать кросс-браузерные различия в поддержке стилизации.