HTML DOM Meter অবজেক্ট HTML-এ <meter> এলিমেন্টকে প্রতিনিধিত্ব করে।
দ্রষ্টব্য: <meter>-কে প্রগ্রেস বার হিসেবে নয়, শুধুমাত্র গেজ হিসেবে ব্যবহার করুন।
সিনট্যাক্স
<meter> এলিমেন্ট তৈরি করার জন্য:
var meterObject = document.createElement("METER")
এখানে, "meterObject" নিম্নলিখিত প্রপার্টিগুলো 가질 수 있습니다:
| প্রপার্টি | বিবরণ |
|---|---|
| high | গেজে high অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
| labels | গেজের জন্য লেবেল হিসেবে কাজ করে <label> এলিমেন্টের তালিকা রিটার্ন করে। |
| low | গেজে low অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
| max | গেজে max অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
| min | গেজে min অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
| optimum | গেজে optimum অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
| value | গেজে value অ্যাট্রিবিউটের মান সেট/রিটার্ন করে। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Meter value</title>
<style>
form { width: 70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin: 5px; }
input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meter-value</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" value="75" low="70" value="85"></meter>
<input type="button" onclick="lifeSource()" value="Reduce">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Life Source at ' + paulaLifeSource.value;
function lifeSource(effect) {
var paulaLifeSource = document.getElementById("paulaLifeSource");
var Immunity = paulaLifeSource.value;
paulaLifeSource.value = 10;
divDisplay.textContent = 'value changed to ' + paulaLifeSource.value + ' from ' + Immunity;
}
</script>
</body>
</html>
আউটপুট
'Reduce' বাটনে ক্লিক করার আগে - মিটার 85 মান দেখাবে।
'Reduce' বাটনে ক্লিক করার পর - মিটার মান 10-এ পরিবর্তিত হবে।