> For the complete documentation index, see [llms.txt](https://yong2401.gitbook.io/til-by-ellie/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yong2401.gitbook.io/til-by-ellie/css-1/css_js.md).

# CSS와 JavaScript

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

1. JavaScript로 CSS 설정

   ```javascript
     document.querySelector("selectors").style.backgroundColor = "yellow";
     document.querySelector("selectors").style.WebkitOverflowScrolling = "touch" | "auto;
   ```
2. JavaScript로 *읽기 전용* CSS 객체([CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)) 반환

   ```javascript
     window.getComputedStyle(element[, pseudoElt]);

     let div = document.querySelector('div');
     let color = window.getComputedStyle(div).getPropertyValue('color');
   ```
3. JavaScript로 CSS **너비**, **높이** 값 탐색

   ![](https://175612507-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaQwJWfxFFpOmmWNN4g%2Fsync%2Fc1dd498fc59afbc107d63dde7995efee27f6916b.png?generation=1621819176035333\&alt=media)

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

   ![](https://175612507-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaQwJWfxFFpOmmWNN4g%2Fsync%2Fce4146d35401c735da937c3880fb6fdea0b816d8.png?generation=1621819176131800\&alt=media)

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

   ※ `innerWidth`, `innerHeight`는 읽기 전용

   * 너비, 높이 변경: [`window.resizeTo`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo)

   ![](https://175612507-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaQwJWfxFFpOmmWNN4g%2Fsync%2F86c27b61f66e5e3076c1e77617fff2cf2f572650.png?generation=1621819175795359\&alt=media)

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

## Reference

[getComputedStyle | MDN](https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle)

[요소 사이즈와 스크롤 | JS Info](https://ko.javascript.info/size-and-scroll)

[CSS와 관련된 자바스크립트](https://www.zerocho.com/category/JavaScript/post/5aa23cd4e70ee8001bc60b9a)