HTML DOM Meter optimum 속성 완벽 정리 – 게이지 값 최적화 방법

HTML DOM의 Meter optimum 속성은 <meter> 요소의 optimum(최적값) 속성에 해당하는 숫자를 가져오거나 설정하는 기능입니다. 이 속성은 high, low, min, max 속성과 함께 사용하면 훨씬 더 효과적으로 활용할 수 있습니다.

참고: <meter> 요소는 진행률 표시줄(progress bar)이 아닌, 오직 게이지(gauge) 용도로만 사용해야 합니다. 진행 상황을 나타내려면 <progress> 요소를 사용하는 것이 올바른 방법입니다.

문법(Syntax)

optimum 속성 값 반환

meterElementObject.optimum

optimum 속성 값 설정

meterElementObject.optimum = number

이제 Meter optimum 속성의 실제 사용 예시를 살펴보겠습니다.

예제 코드

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

실행 결과

'Rectify Optimum level' 버튼을 클릭하기 전 화면입니다.

HTML DOM Meter optimum 속성 완벽 정리 – 게이지 값 최적화 방법

버튼을 클릭한 후에는 optimum 값이 75에서 85로 변경되며, 변경 전후의 값을 함께 출력합니다.

HTML DOM Meter optimum 속성 완벽 정리 – 게이지 값 최적화 방법

정리

Meter optimum 속성은 자바스크립트를 통해 <meter> 게이지의 최적 기준값을 동적으로 읽고 수정할 수 있게 해줍니다. min, max, low, high 속성과 조합하면 측정값이 적정 범위에 있는지 시각적으로 판단하는 데 유용하게 활용할 수 있습니다.