DOM 스타일링

해당 DOM에 스타일 값을 변경할때는

해당 DOM에 스타일 객체가 내장되어 있어서 프로퍼티를 불러서 값을 대입하면 된다.

 

스타일 시트에 있는 값은 인지를 못한다.

 

### 중요한 개념

실제 자바스크립트는 index.html 파일은 제어,접근 할 수 있어도

css, scss 파일은 접근 할 수 없다. -> 스크립트로 탐색 할 수 없다.

 

### 질문 

그러면 해당 css로 만들어진 image 값을 어떻게 불러 오는가?

css파일에 접근하는 것이 아닌

실제 화면 상에서 계산되어서 랜더링 되어있는 값을 그래도 가져와야 한다.

 

### 답

getComputedStyle을 이용한다.

getComputedStyle 함수를 부르고 e.currentTarget 값(내가 스타일 값을 구할 것)을 인수로 넣는다.

그러면 해당 요소에 있는 연산되어 있는 값들을 불러 올 수 있다.

 

연관배열??

getComputedStyle(e.currentTarget)["background-color"]

 

객체형식으로

getComputedStyle(e.currentTarget).backgroundColor  - 카멜형식으로??? 

 

 

DOM 속성 제어하기

1. 먼저 선택자를 통해 요소 가져오기

2. 속성