Thuộc tính high của thẻ <meter> trong HTML

Thuộc tính high của phần tử <meter> trong HTML xác định **ngưỡng giá trị "cao"**. Khi giá trị hiện tại (value) vượt quá ngưỡng này, thước đo hiển thị ở trạng thái "cao" (thường màu đỏ/cam tùy trình duyệt). Thuộc tính này hoạt động kết hợp với min, max, low để chia thang đo thành 3 vùng: thấp, trung bình, cao.

Cú pháp

<meter min="0" max="100" low="30" high="70" value="80"></meter>

Trong ví dụ: 0-30 (thấp), 30-70 (trung bình), 70-100 (cao). Giá trị 80 nằm vùng cao.

Ví dụ: Giám sát rủi ro sức khỏe

<!DOCTYPE html>
<html>
<head>
  <title>Demo meter high</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>Mức độ rủi ro sức khỏe</legend>
      <label>Rủi ro: </label>
      <meter id="healthMeter" min="0" max="100" low="30" high="70" value="85"></meter>
      <button type="button" onclick="boostImmunity()">Tăng miễn dịch (Medi Kit)</button>
      <div id="msg"></div>
    </fieldset>
  </form>
  <script>
    var msg = document.getElementById("msg");
    var meter = document.getElementById("healthMeter");
    msg.textContent = 'Rủi ro: ' + meter.value + ' (ngưỡng cao: ' + meter.high + ')';
    function boostImmunity() {
      var oldHigh = meter.high;
      meter.high = 90; // Nâng ngưỡng cao lên 90
      msg.textContent = 'Miễn dịch tăng! Ngưỡng cao: ' + oldHigh + ' → ' + meter.high;
      // Giá trị 85 bây giờ nằm vùng "trung bình" (30-90)
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Giá trị 85 > high(70) → vùng **cao** (màu đỏ/cam).
2. Sau khi nhấn "Tăng miễn dịch": high thành 90, giá trị 85 < 90 → chuyển vùng **trung bình** (màu vàng/xanh).

Tóm tắt các thuộc tính <meter>

Lưu ý: Phải đảm bảo min ≤ low ≤ high ≤ max. Nếu vi phạm, trình duyệt sẽ tự điều chỉnh hoặc bỏ qua ngưỡng không hợp lệ.