คุณสมบัติ HTML DOM Meter value

คุณสมบัติ HTML DOM Meter value ส่งคืน/ตั้งค่าตัวเลขที่สอดคล้องกับแอตทริบิวต์ value ขององค์ประกอบ <meter> ควรใช้ร่วมกับ high, low, min และ max เพื่อผลลัพธ์ที่ดีกว่า

หมายเหตุ: อย่าใช้ <meter> เป็น progress bar แต่ใช้เป็น gauge (วัดค่า) เท่านั้น

ไวยากรณ์ (Syntax)

การส่งคืนค่าของคุณสมบัติ value:

meterElementObject.value

การตั้งค่าคุณสมบัติ value:

meterElementObject.value = number

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

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

ผลลัพธ์

ก่อนคลิกปุ่ม 'Reduce':

หลังคลิกปุ่ม 'Reduce':