ZeroCho Blog

안녕하세요. 이번 시간에는 CSS와 관련된 자바스크립트에 대해 알아보겠습니다. 우선 자바스크립트로 CSS를 조작하는 것은 최대한 지양하는 것이 좋습니다. CSS3를 사용하여 할 수 있는 것은 다 CSS3로 하세요. 하지만 CSS만으로는 할 수 없는 것들이 있습니다. 특히 리액트같은 프레임워크를 쓸 때나 스크롤 관련한 문제를 해결하기 위해서 어쩔 수 없이 자바스크립트를 사용하여 CSS를 조작해야 하는 경우가 발생합니다. 이 포스팅에서 자바스크립트를 통해 CSS 속성을 바꾸는 방법, 미디어쿼리를 체크하는 방법 등등을 다뤄보겠습니다.

먼저 자바스크립트로 태그의 CSS를 바꾸는 방법입니다. 인라인 CSS로 적용됩니다. 따라서 다른 CSS에 !important가 붙어있다면 적용되지 않습니다.

document.querySelector('선택자').style.display = 'inline-block';

위와 같이 하면 되죠. 주의할 점은 -가 들어간 css 속성입니다. -는 빼고, -뒤에 나오는 글자는 대문자로 바꿔주어야합니다. -webkit같이 처음부터 -가 붙은 CSS 속성이 있는데 역시 w를 대문자로 바꾸어줍니다. 자바스크립트에서 -가 뺄셈 연산자로 취급되어서 캐멀케이스로 바꾸는 작업이 필요한겁니다.

document.querySelector('선택자').style.fontSize = '16px'; // font-size
document.querySelector('선택자').style.WebkitOverflowScrolling = 'touch'; // -webkit-overflow-scrolling

위의 CSS 속성들은 getter setter가 적용된 속성이라 반대로 읽어올 수도 있습니다. 하지만 인라인 CSS로 적용된 것만 읽을 수 있습니다. 별로 유용하지 않다는 뜻입니다.

따라서 읽어올 때는 getComputedStyle(태그)를 사용합니다.

getComputedStyle(document.querySelector('선택자')).fontSize; // 14px

너비나 높이같은 것은 getComputedStyle 말고도 구할 수 있습니다. 따로 외워두시는 게 좋습니다. offsetWidth, scrollWidth, clientWidth 등이 있습니다. offsetHeight, scrollHeight, clientHeight 등이 있습니다. 설명은 아래 그림으로 대체합니다.

사진 출처: https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

아래와 같이 태그의 속성으로 접근하면 됩니다.

document.querySelector('선택자').scrollHeight;

window에는 innerWidth와 innerHeight라고 페이지의 너비 높이를 알려주는 속성이 있습니다. screen에는 availWidth와 availHeight라고 모니터 자체의 해상도를 알려줍니다. 뭔 width와 height가 이렇게 많은지 모르겠네요 ㅎ

window.innerWidth; // 1920
screen.availHeight; // 1200

이외에 태그.getBoundingClientRect()와 태그.getClientRects()도 있습니다. 태그의 너비 높이 뿐만 아니라 태그가 위치한 x, y 좌표도 알려줍니다.

document.querySelector('선택자').getBoundingClientRect(); // { x, y, width, height, top, right, bottom, left }

자바스크립트로 미디어쿼리를 확인하는 방법입니다. window.matchMedia 메서드로 현재 어떤 미디어쿼리가 적용되어 있는지 파악 가능합니다. 인자로 미디어쿼리 기준을 넣어주면 됩니다.

window.matchMedia('(min-width: 760px)').matches // true or false

일치 결과에 따라 true나 false가 나오기 때문에 if 문과 함께 사용하면 됩니다. 아래처럼요.

if (window.matchMedia('(min-width: 760px)').matches) {
  document.body.style.fontSize = '20px';
}

이렇게 CSS를 다루는데 자주 쓰는 자바스크립트만 모아두었습니다. 이외에도 추가를 원하시는 것이 있다면 댓글을 남겨주세요.