HTML DOM Meter low 속성 완벽 정리 – 사용법과 예제 코드

Meter low 속성은 HTML <meter> 요소의 low 속성에 해당하는 숫자 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 high, min, max 속성과 함께 활용하면 측정 범위를 훨씬 더 정교하게 제어할 수 있습니다.

문법(Syntax)

Meter low 속성의 기본 문법은 다음과 같습니다.

low 속성 값 가져오기

meterElementObject.low

low 속성 값 설정하기

meterElementObject.low = number

number 자리에는 min 값보다 크고 max 값보다 작은 숫자를 지정할 수 있으며, 이는 '낮음(low)'으로 간주되는 구간의 기준점이 됩니다.

예제 코드

아래 예제는 Meter low 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 low 값이 동적으로 변경되며, 변경 전후의 값을 화면에 출력합니다.

<!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">Paula's Health Risk: </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' 버튼 클릭 전 −

HTML DOM Meter low 속성 완벽 정리 – 사용법과 예제 코드

'Medi Kit' 버튼 클릭 후 −

HTML DOM Meter low 속성 완벽 정리 – 사용법과 예제 코드

버튼을 클릭하면 JavaScript의 lifeSource() 함수가 실행되어 기존 low 값(60)을 읽어온 뒤, 새로운 값인 75로 설정합니다. 그 결과 '면역 수치가 60에서 75로 증상했습니다'라는 메시지가 화면에 표시되며, <meter> 게이지의 시각적 상태도 함께 변경되는 것을 확인할 수 있습니다.