내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌55 - JavaScript - 9달 전 등록 / 8달 전 수정

CSS와 관련된 자바스크립트

style, getComputedStyle, getBoundingClientRect, matchMedia
조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 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 등이 있습니다. 설명은 아래 그림으로 대체합니다.

undefined

사진 출처: 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를 다루는데 자주 쓰는 자바스크립트만 모아두었습니다. 이외에도 추가를 원하시는 것이 있다면 댓글을 남겨주세요.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.