HTML DOM을 이용한 CSS 변경

마지막으로 정리하고 넘어가겠습니다.
HTML DOM은 자바스크립트로 하여금 HTML 요소에 대해 여러가지를 변경할 수 있게 합니다.
그 중 하나가 스타일인데, 이 부분은 CSS에서 주로 사용하는 선택자(selector)를 사용합니다.

HTML Style 변경

document.getElementById(id).style.property = new style

다음과 같이 쓰면 됩니다. 예문은 아래와 같습니다.

document.getElementById('id1').style.color = 'red'

이벤트 사용

위와 같은 방법은 Event를 사용해서도 구현이 가능합니다.

<button 
    type="button" 
    onclick="document.getElementById('id1').style.color = 'red'"
>
Click Me!
</button>

이런식으로 onclick안에 직접 자바스크립트로 HTML 스타일을 변경하는 코드를 작성할 수 있습니다.