[Javascript] 스타일 변경하기!

CSS가 아닌 스크립트로 스타일 변경하는 방법을 한번 알아봅시다

<div>
  <div id="blue">blue</div>
  <div id="red">red</div>
</div>

이러한 HTML 코드가 있다고 가정해봅시다. 

 

CSS는 적용되어 있지 않습니다. 그럼 아무것도 없는것처럼 빈 공간만 있겠죠?

 

이제 자바스크립트를 통해 스타일을 넣어봅시다

const styleBlue = document.getElementById('blue');
const styleRed = document.getElementById('red');

이렇게 요소를 가져옵니다

styleBlue.style.height = '50px';
styleBlue.style.backgroundColor = 'blue';

styleRed.style.height = '50px';
styleRed.style.backgroundColor = 'red';

이렇게 적어주면 스타일이 변경된걸 확인할 수 있습니다!!