آموزش تگ meter در HTML

تگ برای اندازه گیری داده ها در یک محدوده معین استفاده می شود. این تگ یک اندازه گیری عددی با محدوده را مشخص می کند. به عنوان یک مقیاس نیز شناخته می شود.

برای نمایش میزان استفاده از دیسک، میزان فعالیت و … استفاده شود.

تگ meter یک تگ جدید در HTML5 است، بنابراین باید از مرورگرهای به روز و جدید استفاده کنید.

ویژگی های تگ meter

تگ از ویژگی های عمومی و رویداد و همچنین برخی ویژگی های خاص پشتیبانی می کند.

مثال برای تگ meter

در این مثال روند پیشرفت را همراه با ویژگی های min، max و value می بینیم.

Display a gauge:

<meter value=”30″ min=”1″ max=”100″>30 out of ۱۰۰

<meter value=”0.8″>80%

خروجی

سبک دهی Meter

می توانید کد CSS را روی تگ meter اعمال کنید.

meter{

  width: ۳۰۰px;

  height: ۳۰px;

}

خروجی

استفاده از جاوا اسکریپت برای به‌روزرسانی مقدار

می‌توانید مقدار تگ `<meter>` را با استفاده از جاوا اسکریپت تغییر دهید:

<meter id="progressMeter" value="2" min="0" max="10">2 out of 10</meter>

<button onclick="updateMeter()">Update Meter</button>

<script>

function updateMeter() {

  var meter = document.getElementById('progressMeter');

  meter.value = 5; // مقدار جدید

}

</script>

با این روش می‌توانید مقادیر تگ `<meter>` را به صورت پویا به‌روزرسانی کنید.

تگ `<meter>` یک ابزار مفید و قدرتمند برای نمایش مقادیر عددی در HTML است. با استفاده از خصوصیات مختلف و امکان استایل دهی و به‌روزرسانی پویا، می‌توانید کاربردهای مختلفی برای این تگ پیدا کنید.

مرورگرهای پشتیبان

نام عنصر	Chrome	IE	Firefox	Opera	Safari
	بله	بله	بله	بله	بله