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

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

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

ไวยากรณ์ (Syntax)

การอ่านค่า low

meterElementObject.low

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

meterElementObject.low = number

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

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

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

ผลลัพธ์

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

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

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

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