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

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

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

ไวยากรณ์ (Syntax)

การอ่านค่า min

meterElementObject.min

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

meterElementObject.min = number

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Meter min</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-min</legend>
            <label for="paulaLifeSource">Health Risk ของ Paula: </label>
            <meter id="paulaLifeSource" max="100" min="0" high="80" low="60" value="60" optimum="40"></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 + '/' + paulaLifeSource.max;
        function lifeSource() {
            var paulaLifeSource = document.getElementById("paulaLifeSource");
            var Immunity = paulaLifeSource.min;
            paulaLifeSource.min = 20;
            divDisplay.textContent = 'Permenant Damage to ' + paulaLifeSource.min + ' from ' + Immunity;
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม Medi Kit จะแสดงค่า meter เริ่มต้น (min=0, value=60, max=100)

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

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

• อิลิเมนต์ <meter> ใช้แสดงค่าสเกลาร์ภายในช่วงที่รู้จัก (known range)
• ค่า min ต้องน้อยกว่า max และควรน้อยกว่าหรือเท่ากับ low และ high
• การเปลี่ยนค่า min จะส่งผลต่อการแสดงผลทางสายตาของ meter bar
• เหมาะสำหรับแสดงค่าเช่น disk usage, battery level, คะแนนสอบ, หรือระดับความเสี่ยง