HTML DOM Meter high 속성 – 개념부터 실전 예제까지 한 번에 정리

HTML DOM의 Meter high 속성은 <meter> 요소의 high 속성에 해당하는 숫자 값을 반환하거나 설정하는 기능입니다. 이 속성은 low, min, max 속성과 함께 사용할 때 훨씬 더 정확하고 의미 있는 게이지 표현이 가능합니다.

문법(Syntax)

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

1. high 속성 값 반환하기

meterElementObject.high

2. high 속성 값 설정하기

meterElementObject.high = number

값을 반환할 때는 해당 <meter> 요소에 지정된 high 임계값이 그대로 리턴되며, 숫자를 대입하면 런타임 중에도 동적으로 임계값을 변경할 수 있습니다.

예제(Example)

아래는 Meter high 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 high 값이 80에서 90으로 변경되는 것을 화면에서 바로 확인할 수 있습니다.

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

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

'Medi Kit' 버튼을 클릭하기 전 −

HTML DOM Meter high 속성 – 개념부터 실전 예제까지 한 번에 정리

'Medi Kit' 버튼을 클릭한 후 −

HTML DOM Meter high 속성 – 개념부터 실전 예제까지 한 번에 정리

정리

Meter high 속성은 자바스크립트를 통해 <meter> 게이지의 '높음(high)' 임계 구간을 읽고 수정할 수 있게 해주는 유용한 도구입니다. 특히 건강 상태, 디스크 사용량, 성능 지표처럼 구간별로 상태를 시각화해야 하는 UI에서 min, max, low 속성과 함께 활용하면 사용자에게 직관적인 피드백을 제공할 수 있습니다.