CSS 요소를 javascript에서 제어하기

사실 이건 상당히 간단하다.

h1.style.color = tomato;

와 같은 접근 방법으로 CSS 요소를 변경할 수 있다.

그렇지만, CSS 변경은 CSS 파일에서 하는 것이 좋을 것이다.

그렇다면 CSS 요소를 어떻게 인터랙티브하게 구성할 수 있을까?

 

먼저 CSS 파일의 구성을 이렇게 한다.

body {
	background-color: beige;
}

h1 {
	color: powderblue;
}

.active {
	color: tomato;
}

여기서 h1이 변경하게 될 요소이며, 해당 요소의 특정 이벤트가 트리거되면 그 요소의 색을 tomato로 변경할 것이다.

이를 위에 쓴 것 마냥, h1.style.color = tomato; 로 변경하지 말고 변경하게 될 값을 CSS에 저장한다음,

javascript에서는 해당 element로 연결만 시켜주자는 게 요지이다.

 

BEFORE

fuction handleTitleClick() {
	h1.style.color = "tomato";
}

h1.addEventListener("click", handleTitleClick);

AFTER

fuction handleTitleClick() {
	h1.className = "active";
}

h1.addEventListener("click", handleTitleClick);

다시 한 번 정리하자면, javascript에서 h1 글자를 토마토로 바꿔! 라고 직접 개입을 하는 것이 아니라

h1의 class를 active로 변경해!(그리고 CSS에서 active class는 글자색을 tomato로 정의한다.) 를 통해 간접 개입을 하는 것.

 

이로 얻는 이득이 무엇일까? 내 생각엔 확실한 분리로 인한 코드의 일관성이라 생각한다.

내가 저 토마토 색을 나중에 엄청엄청 복잡한 코드가 된 이후에, 에메랄드 색으로 바꿔야 한다고 생각해보자.

해당 요소는 분명히 CSS인데, javascript 가서 그걸 찾고 수정하고 앉았어야 한다는 것이다.

이런 함수가 수백수천개라 생각해보자.. 얼마나 헷갈릴까?