JavaScript는 getElementById(), getElementsByClassName() 같은 DOM 선택 메서드와 style 속성을 조합하면 요소의 색상, 글꼴 크기 등 CSS 스타일을 자유롭게 변경할 수 있습니다.
아래 예제에서는 getElementById() 메서드를 사용해 요소의 글꼴 크기와 글꼴 스타일을 변경하는 방법을 살펴보겠습니다.
예제 1 — 글꼴 크기와 글꼴 스타일 변경하기
다음 예제에서는 style.fontSize와 style.fontStyle 명령을 사용해 지정된 텍스트의 글꼴 크기를 35px로, 글꼴 스타일을 이탤릭체(italic)로 변경합니다.
<html>
<body>
<p id="size">JavaScript can change the style of an HTML element.</p>
<p id="style">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
<button type="button" onclick="document.getElementById('style')
.style.fontStyle='italic'">Style</button>
</body>
</html>위 코드를 실행하면 브라우저에 다음과 같은 초기 화면이 나타납니다.
버튼을 클릭하면 첫 번째 텍스트는 글꼴 크기가, 두 번째 텍스트는 글꼴 스타일이 아래 출력 결과처럼 각각 변경됩니다.
실행 결과
예제 2 — 텍스트 색상 변경하기
다음 예제에서는 style.color 명령을 사용해 텍스트의 색상을 파란색(blue)으로 변경합니다.
<html>
<body>
<p id="color">JavaScript can change the color of an HTML element.</p>
<button type="button" onclick="document.getElementById('color').
style.color='blue'">Color Me</button>
</body>
</html>위 코드를 실행하면 브라우저 창에 다음과 같은 화면이 나타납니다.
Color Me 버튼을 클릭하면 아래 출력 결과와 같이 지정된 텍스트의 색상이 파란색으로 변경됩니다.
실행 결과
이처럼 JavaScript의 style 객체를 활용하면 별도의 CSS 파일 수정 없이도 사용자 이벤트(클릭 등)에 반응해 웹 페이지의 스타일을 실시간으로 동적으로 제어할 수 있습니다.