[javascript] 문서 객체 모델(dom)을 조작하여 css 적용하기

자바스크립트에서 문서 객체 모델(dom, Document Object Model)을 조작하여 CSS를 적용하는 예시를 하나 보여드리겠습니다. 아이디가 test인 div 요소의 배경색을 노란색으로 해주는 코드입니다.

 

<div id="test">
    안녕하세요
</div>
<script>
    const testDiv = document.getElementById("test");
    testDiv.style.backgroundColor = 'yellow';
</script>

 

document 객체의 getElementById() 메서드로 test를 아이디로 갖는 요소를 선택합니다. 그 다음에 객체.style.backgroundColor의 값을 "yellow"로 설정함으로 해당 요소의 배경색을 노란색으로 설정합니다.