HTML DOM의 Meter 객체는 HTML의 <meter> 요소를 JavaScript에서 다룰 수 있도록 해주는 인터페이스입니다. <meter> 요소는 특정 범위 내에서 값이 어느 정도인지 시각적으로 보여주는 게이지(gauge) 역할을 합니다.
참고: <meter> 요소는 진행 상황을 나타내는 프로그레스 바(progress bar)로 사용해서는 안 되며, 오직 게이지(측정기) 용도로만 사용해야 합니다. 디스크 사용량, 배터리 잔량, 설문 결과 비율 등 현재 값의 위치를 표현할 때 적합합니다.
Meter 객체 생성 문법
JavaScript로 새로운 <meter> 요소를 만들려면 다음과 같이 작성합니다.
var meterObject = document.createElement("METER")Meter 객체의 주요 속성
생성된 meterObject는 아래 표와 같은 속성들을 가질 수 있습니다.
| 속성 | 설명 |
|---|---|
| high | 게이지에서 '높음'으로 간주되는 경계값(high 속성)을 설정하거나 반환합니다. |
| labels | 해당 게이지의 레이블 역할을 하는 <label> 요소들의 목록(NodeList)을 반환합니다. |
| low | 게이지에서 '낮음'으로 간주되는 경계값(low 속성)을 설정하거나 반환합니다. |
| max | 게이지가 나타낼 수 있는 최대값(max 속성)을 설정하거나 반환합니다. |
| min | 게이지가 나타낼 수 있는 최소값(min 속성)을 설정하거나 반환합니다. |
| optimum | 게이지에서 가장 이상적인 값(optimum 속성)을 설정하거나 반환합니다. |
| value | 게이지의 현재 값(value 속성)을 설정하거나 반환합니다. |
이 중 high, low, optimum 속성은 게이지의 색상 표시에 영향을 줍니다. 현재 값이 low 이하이거나 high 이상이면 브라우저가 노란색 또는 빨간색 등으로 구분하여 표시할 수 있습니다.
예제: Meter value 속성 활용하기
다음은 Meter 객체의 value 속성을 읽고 변경하는 예제입니다. 버튼을 클릭하면 게이지의 현재 값이 10으로 변경되며, 변경 전후의 값이 화면에 출력됩니다.
<!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' 버튼 클릭 후 − value 속성이 10으로 변경되어 게이지가 낮아지고, 변경 전후 값이 텍스트로 출력됩니다.
이처럼 Meter 객체의 value 속성을 활용하면 페이지 로딩 후에도 동적으로 게이지 값을 읽거나 수정할 수 있어, 대시보드나 상태 모니터링 UI를 구현할 때 유용하게 사용할 수 있습니다.