getPropertyValue의 반환값

---

다음과 같이 Progress-Bar를 구현할 때, 버튼을 클릭한 뒤에 진행 바 요소의 width 값이 25%가 되었을 경우 해당 애니메이션을

종료시키기 위해서 다음과 같이 코드를 작성하였다.

if(elem.style.getPropertyValue('width') === range * current) { //현재 진행 바 가로 너비가 지정 25%에 도달했을 경우
      clearInterval(intervalId); //애니메이션 종료
      current++;
    }

하지만 원하는 결과를 얻지 못하고 진행 바는 동작이 종료되지 않은 채 무한 루프로 빠지는 문제가 발생하였다.

 

getPropertyValue의 반환값

문제 getPropertyValue가 반환하는 데이터 타입에 문제가 있었다.

The CSSStyleDeclaration.getPropertyValue() method interface returns a DOMString containing the value of a specified CSS property.

A DOMString is a sequence of 16-bit unsigned integers, typically interpreted as UTF-16 code units. This corresponds exactly to the JavaScript primitive String type

 

getPropertyValue가 반환하는 값의 데이터 타입은 String type이기 때문에 데이터 타입 불일치로 해당 조건문이 제대로 수행하지 않았던 것이다.

if(parseFloat(elem.style.getPropertyValue('width')) === range * current) {
      clearInterval(intervalId);
      current++;
    }

이를 해결하기 위해 다음과 같이 parseFloat()를 사용하여 데이터 타입을 숫자로 형변환 해주었다.

(해당 진행 바 10ms 당 2.5씩 증가하기 때문에 소수점을 반환하는 parseFloat를 사용)