CSS와 JavaScript

🚫대부분 스타일의 경우 자바스크립트로 CSS 조작 하는 것보다 CSS로 하는 것이 좋습니다.

1. JavaScript로 CSS 설정

     document.querySelector("selectors").style.backgroundColor = "yellow";
     document.querySelector("selectors").style.WebkitOverflowScrolling = "touch" | "auto;

2. JavaScript로 읽기 전용 CSS 객체(CSSStyleDeclaration) 반환

     window.getComputedStyle(element[, pseudoElt]);
   
     let div = document.querySelector('div');
     let color = window.getComputedStyle(div).getPropertyValue('color');

3. JavaScript로 CSS 너비, 높이 값 탐색

   

   document.querySelector("selectors").offsetWidth;
   document.querySelector("selectors").clientHeight;
   document.querySelector("selectors").scrollWidth;

   

   window.innerWidth; // border 내부 너비
   window.innerHeight; // border 내부 높이

   ※ innerWidth, innerHeight는 읽기 전용

   • 너비, 높이 변경: window.resizeTo

   

   window.screen.availWidth; // 실제 사용 가능한 화면 너비
   window.screen.availHeight; // 실제 사용 가능한 화면 높이

Reference

getComputedStyle | MDN

요소 사이즈와 스크롤 | JS Info

CSS와 관련된 자바스크립트