คุณสมบัติ high ของ Meter ใน HTML DOM

คุณสมบัติ high ของ Meter

คุณสมบัติ high ของออบเจ็กต์ <meter> ใช้สำหรับคืนค่าหรือกำหนดค่าตัวเลขที่ตรงกับแอตทริบิวต์ high ของอิลิเมนต์ <meter> ควรใช้ร่วมกับแอตทริบิวต์ low, min และ max เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

ไวยากรณ์ (Syntax)

การอ่านค่า high

meterElementObject.high

การกำหนดค่า high

meterElementObject.high = number

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ Meter high เพื่อเปลี่ยนค่าเกณฑ์ high ของ meter

<!DOCTYPE html>
<html>
<head>
    <title>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>Meter-high</legend>
            <label for="paulaLifeSource">Health Risk ของ Paula: </label>
            <meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></meter>
            <input type="button" onclick="lifeSource()" value="Medi Kit">
            <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.high;
            paulaLifeSource.high = 90;
            divDisplay.textContent = 'Immunity increased to ' + paulaLifeSource.high + ' from ' + Immunity;
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Medi Kit จะแสดงค่า meter เริ่มต้น (high=80, value=85)

หลังคลิกปุ่ม Medi Kit ค่า high จะเปลี่ยนเป็น 90 และแสดงข้อความแจ้งการเปลี่ยนแปลง

คำอธิบายเพิ่มเติม

• ค่า high กำหนดเกณฑ์ที่ถือว่าเป็นค่า "สูง" - ต้องอยู่ระหว่าง low และ max
• เมื่อค่า value สูงกว่า high มักจะแสดงสีแดง (ขึ้นอยู่กับ browser/theme)
• ลำดับที่ถูกต้อง: min ≤ low ≤ high ≤ max
• ค่า optimum ระบุค่าที่ "เหมาะสมที่สุด" - ถ้าอยู่ระหว่าง low-high จะเป็นสีเขียว