কম্পিউটার টিউটোরিয়াল

HTML DOM Meter অবজেক্ট

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-এ পরিবর্তিত হবে।

  1. HTML DOM Area অবজেক্ট

  2. HTML DOM HR অবজেক্ট

  3. HTML DOM Meter value প্রপার্টি

  4. HTML DOM Ul অবজেক্ট