JS) [CSS in JS] 자바스크립트에서 CSS 사용하기

JavaScript 파일에서 CSS를 변경하는 방법에 대해 정리한다.

 

event를 활용하여 실습을 진행한다.

---

1) CSS 적용 순서

 

실습을 통해 살펴본다.

 

실습에 사용한 전체 코드

 

클릭할 때마다 이벤트가 발생하여 텍스트 색상이 바뀐다.

 

 

step 1 > element를 찾는다.

 

const text = document.querySelector(".container__contents");

 

 

step 2 > event를 listen한다.

 

text.addEventListener("click", handleTitleClick);

 

 

step 3 > event에 반응한다.

 

function handleTitleClick() {
	const currentColor = text.style.color;
	let newColor;

	if (currentColor == "blue") {
		newColor = "tomato";
	} else {
		newColor = "blue";
	}
	text.style.color = newColor;
}

 

event가 발생하면, 그에 맞게 코드를 활용하여 무언가를 적용시킨다.

 

 

 

이 방법이 기본적으로 JS에서 CSS를 활용할 수 있는 '흐름'이다.

 

흐름은 맞지만, 해당 실습을 통해 좀 더 깔끔하게 코드를 구성하는 방식을 살펴보자.

---

2) 스마트하게 CSS 사용하기

 

Style에 적합한 도구는 'CSS' 이며, Animation에 적합한 도구는 'JavaScript'이다.

 

const text = document.querySelector(".container__contents");

function handleTitleClick() {
	const clickedClass = "clicked";

	console.log(text.className);
	if (text.className === clickedClass) {
		text.className = "";
	} else {
		text.className = clickedClass;
	}
}

text.addEventListener("click", handleTitleClick);

위 코드처럼, 클릭하는 경우에 className을 활용하여 클래스명을 바꿔주는 방식이 있다.

 

하지만 이 방법은 기존의 클래스명을 없애버린다는 치명적인 단점이 있다. 

 

기존 클래스를 유지하면서 클래스명을 추가하는 방식이 필요하다.

 

 

(+ clickedClass 라는 변수를 선언했다. 개발 과정에서의 실수를 줄이기 위해서는 이처럼 사용자가 지정하는 값을 공통 변수로 지정하는 방식이 좋다.)

 

const text = document.querySelector(".container__contents");

function handleTitleClick() {
	const clickedClass = "clicked";

	if (text.classList.contains(clickedClass)) {
		text.classList.remove(clickedClass);
	} else {
		text.classList.add(clickedClass);
	}
}

text.addEventListener("click", handleTitleClick);

 

이 코드는 classList의 contains, remove, add 메서드를 활용하였다.

 

기존의 클래스를 유지하고 새로 부여하는 클래스명의 여부만 체크하며 토글 방식을 만든다.

 

 

위의 방식이 event를 활용하는 기본적인 방식이다.

 

불필요한 코드를 정리하고 깔끔하게 메서드만을 활용하여 간결화하였다.

 

---

위 코드를 더 간단하게 하는 방법이 있는데, 이는 위 기능을 하는 메서드가 존재하기 때문에 가능하다.

 

모든 방식이 메서드가 있는 것은 아니므로, 참고용으로만 확인해야 한다.

 

const text = document.querySelector(".container__contents");

function handleTitleClick() {
	text.classList.toggle("clicked");
}

text.addEventListener("click", handleTitleClick);

---

참고)

https://nomadcoders.co/javascript-for-beginners/lectures/2896

 

https://developer.mozilla.org/ko/docs/Web/API/DOMTokenList