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

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

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

ไวยากรณ์ (Syntax)

การอ่านค่า max

meterElementObject.max

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

meterElementObject.max = number

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Meter max</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-max</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 + '/' + paulaLifeSource.max;
        function lifeSource() {
            var paulaLifeSource = document.getElementById("paulaLifeSource");
            var Immunity = paulaLifeSource.max;
            paulaLifeSource.max = 80;
            divDisplay.textContent = 'Life Decreased to ' + paulaLifeSource.max + ' from ' + Immunity;
        }
    </script>
</body>
</html>

ผลลัพธ์

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

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

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

• ค่า max ต้องมากกว่า min และควรมากกว่าหรือเท่ากับ high
• การลดค่า max ขณะที่ value อยู่ใกล้ค่าเดิมอาจทำให้ value เกิน max ใหม่ (browser จะปรับให้อยู่ในช่วงอัตโนมัติ)
• ใช้ร่วมกับ value, min, low, high, optimum เพื่อกำหนดเกณฑ์การแสดงสี (เขียว/เหลือง/แดง)