แอตทริบิวต์ high ของ <meter> ใน HTML

แอตทริบิวต์ high คืออะไร?

แอตทริบิวต์ high ของเอลิเมนต์ <meter> ใช้กำหนด **เกณฑ์ค่าสูง (High threshold)** ของเกจวัดค่า เมื่อค่า value สูงกว่า high จะถือว่าอยู่ในโซน "สูง" (High zone) ซึ่งเบราว์เซอร์อาจแสดงสีแดงหรือสีเตือน (ขึ้นอยู่กับการจัดสไตล์)

ควรใช้ร่วมกับ min, max, low เพื่อกำหนดช่วงค่าทั้งหมด:

• min ≤ low ≤ high ≤ max
• value ต้องอยู่ระหว่าง min และ max

โซนการแสดงผลของ <meter>

ตัวอย่าง: ตัววัดความเสี่ยงสุขภาพ

<!DOCTYPE html>
<html>
<head>
  <title>Meter high Attribute Demo</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    meter { width: 100%; height: 30px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>ตัววัดระดับความเสี่ยง</legend>
      <label>ระดับความเสี่ยงของพอล่า: </label>
      <meter id="riskMeter" min="0" max="100" low="30" high="70" optimum="20" value="85"></meter>
      <br>
      <input type="button" onclick="useMediKit()" value="ใช้ Medi Kit (ลดความเสี่ยง)">
      <div id="status"></div>
    </fieldset>
  </form>

  <script>
    var statusDiv = document.getElementById("status");
    var meter = document.getElementById("riskMeter");
    statusDiv.textContent = 'ระดับความเสี่ยงปัจจุบัน: ' + meter.value + ' (High zone: >' + meter.high + ')';

    function useMediKit() {
      var oldHigh = meter.high;
      meter.high = 85; // ยกเกณฑ์ High ขึ้น (เช่น ระบบภูมิคุ้มกันดีขึ้น)
      meter.value = 60; // ลดค่าความเสี่ยง
      statusDiv.textContent = '💊 ใช้ Medi Kit แล้ว! เกณฑ์ High: ' + oldHigh + ' → ' + meter.high + ' | ค่าปัจจุบัน: ' + meter.value;
      statusDiv.style.color = 'green';
    }
  </script>
</body>
</html>

การเข้าถึงและเปลี่ยนแปลงด้วย JavaScript

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

// อ่านค่า
console.log(meter.high);    // ค่า high ปัจจุบัน
console.log(meter.low);     // ค่า low ปัจจุบัน
console.log(meter.value);   // ค่าปัจจุบัน
console.log(meter.optimum); // ค่าที่เหมาะสม

// เขียนค่า (เปลี่ยนแปลงได้)
meter.high = 80;
meter.low = 20;
meter.value = 50;

สรุปแอตทริบิวต์ของ <meter>

หมายเหตุ: <meter> ใช้สำหรับ **แสดงค่าที่ทราบช่วงแล้ว** (Known range) เช่น การใช้งานดิสก์, อุณหภูมิ, คะแนนสอบ ส่วน <progress> ใช้สำหรับ **ความคืบหน้า** (Progress) ของงานที่กำลังดำเนินการ