목차
· 기존 방식의 문제점
· 효율적이고 더 나은 방식
잠깐 정리를 먼저 해보겠습니다 🫨
· getComputedStyle로 도출된 크기 값을 split을 통해 가공하지마세요
기존 방식의 문제점
getComputedStyle에서 출력되는 값들의 경우 px 단위를 붙여 나오거나, pt 단위 등 다양한 단위들과 함께 출력되는 것을 확인할 수 있습니다. 문자열 형태로 제공되기 때문에 split을 통해 단위에 대한 분기 처리로 가공을 한다면, 매우 비효율적인 로직을 제공할 수 있기 때문에 평소 split 형태로 임시 방편의 로직을 작성했던 부분에 있어 해답을 얻고자 포스팅을 진행하였습니다. 평소 비효율적이라고 생각되었던 코드는 아래와 같습니다.
const element = document.body.querySelector("찾고자 하는 노드 프로퍼티");
/** 아래 로직의 문제점은 getComputedStyle에서 도출된 height 값에 px이 아닌 경우 유연하게 대처를 하지 못하다는 점입니다. */
const height = getComputedStyle(element).height.split("px")[0];getComputedStyle을 통해 해당 DOM 엘리먼트에 접근을 해서 높이 값 또는 너비 값을 가져올 경우 해당 크기의 단위까지 가져오는 특징이 있는데, 이떄 단위를 제거하기 위해 split을 사용하여 제거를 하게 된다면 현재 상태로서는 제거가 정상적으로 되겠지만 추후 다른 값이 올 경우에는 비정상적인 로직으로서 작동이 됩니다.
효율적이고 더 나은 방식
이를 위해 parseInt · parseFloat과 같은 메소드를 이용하면 문자형 임에도 불구하고, 동적 단위에도 유연하게 대처를 할 수 있습니다. 예를 들어 getComputedStyle로 도출된 값이 "71.056px" 일 경우에 parseInt를 통해 바로 변경이 가능하다는 말입니다. 그리고 뒤에 따라오는 px에 대한 부분도 자연스럽게 없애줄 수 있습니다. parseInt에는 옵셔널한 값이 붙습니다. 이를 radix라고 명칭하며 radix 값에 따라 진수 별 출력되는 값이 다르다고 생각하면 됩니다. 그렇다면 소숫점으로 getComputedStyle의 값이 도출되었을 경우에는 어떻게 소숫점으로 바로 변경할 수 있을까요?
parseFloat 메소드라는게 존재합니다. parseFloat 메소드는 radix 값을 옵셔널하게 지원하지 않지만, parseFloat을 통해 getComputedStyle로 도출되는 값을 바로 단위가 제거된 상태의 소숫점 형태로 변경하여 확인할 수 있습니다. 이에 따른 값을 통해 Math.round로 소숫점을 반올림 하는 등 다양한 사례로 사용이 가능합니다. 이를 활용하여 위의 비정상적인 로직을 아래와 같이 수정할 수 있습니다.
const element = document.body.querySelector("찾고자 하는 노드 프로퍼티");
/** 정수 형태로 값을 얻고자 한다면 아래의 코드를 참고할 수 있습니다. */
const height = parseInt(getComputedStyle(element).height, 10);
/** 소숫점 형태로 값을 얻고자 한다면 아래의 코드를 참고할 수 있습니다. */
const height = parseFloat(getComputedStyle(element).height);레퍼런스
댓글