★ 웹 페이지 본문 글씨 전체 색상을 동적으로 변경하는 방법

사용자로 하여금 웹 페이지의 본문 글씨 색상을 동적으로 변경할 수 있게 하려면?

본문 글씨 전체 색상을 변경하는 것은 의외로 간단하다. 이것을 구현하는데는 두 가지 방법이 있다. 우선 첫 번째 방법부터 살펴보자. 아래 세 가지 색상 변경 버튼을 클릭해 보기 바란다. 원 상태대로 돌아오려면 원래대로 버튼을 클릭하면 된다. 이 예제는 인터넷 익스플로러 4 이상, 넷스케이프 6 이상에서 동작한다.

위 버튼에 대한 소스 코드는 다음과 같다.

<button onclick="document.fgColor='orange'">ORANGE</button>
<button onclick="document.fgColor='#efefef'">#EFEFEF</button>
<button onclick="document.fgColor='cyan'">CYAN</button>
<button onclick="document.fgColor='black'">원래대로</button>

DOM 구조의 document 객체에는 글꼴의 전경색(foreground color)을 의미하는 fgColor 속성이 있다. 이 속성 값을 변경해 주면 본문 전체의 글씨 색상을 변경할 수가 있다.

두 번째 방법은 body 객체의 text 속성을 이용하는 방법이다. 위 예제와 마찬가지로 아래 버튼을 클릭해 보기 바란다.

예제 결과는 비슷하지만 소스 코드는 약간 다르다. 위 예제에 대한 소스 코드는 다음과 같다.

<button onclick="document.body.text='gold'">GOLD</button>
<button onclick="document.body.text='green'">GREEN</button>
<button onclick="document.body.text='blue'">BLUE</button>
<button onclick="document.body.text='black'">원래대로</button>

DOM 구조의 document 객체에는 본문 객체에 접근할 수 있는 body 객체가 있다. 이 body 객체의 text 속성을 이용하여 색상을 변경하면 문서 전체의 글씨 색상을 변경할 수가 있다.