Javascript > Css 조작

스크립트 내의 ex ) box.style="color:blue ; border:1px solid black;" 이런식으로 조작이 가능하지만

작성 이후 조작이 어려움.. (이유 : 문자열로 인식하기 때문) 동일한 문자열이지만 배열 형식이면 더욱

관리하기 편해서 ex) box.style['color'] = 'gold'; 이런식으로도 가능함

하지만 이 또한 문자열인 배열이기때문에 Css 에서는 더욱 편한 방식을 지원함.

ex) box1.style.backgroundColor = 'blue'; => javascript 에서는 '-'를 인식할 수 없기 때문에
기존 캐밥 표기법이 아닌 카멜 표기법을 사용함. 또한 em , px , % 등의 수치를 넣기 위해서는 ex)"5px" 이런 방식으로
문자열로 값을 넣는다.

javascript 내부에서 인라인 시트가 아닌 css값을 불러오는 방법 =>
ex) const list = getComputedStyle(box); 해당 태그의 모든 css 를 가져옴.
ex) list.getPropertyValue('width'); 방식으로 원하는 값을 가져올 수 있음.
ex) box1.style.width = parseInt(list.getPropertyValue('width'))*2+'px'; 이런 방식으로 조작이 가능함.

참조하면 좋을 사이트 : https://developer.mozilla.org/ko/docs/Web