[JS] toggle을 이용하여 간단하게 글자색을 바꿔보자

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기

(3.6 CSS in Javascript ~ 3.8 CSS in Javascript part Three)

---

 

 

최종 목표

목표 : 글자를 클릭하면 Blue로 색상 변경. 또 다시 클릭하면 Tomato색으로 변경

blue → tomato → blue → tomato …

 

글자색을 변경하는 다양한 방법들이 있지만 최종적으로 toggle을 통해 얼마나 간편하고 강력하게 변경할 수 있는지,

또 얼마나 깔끔하게 코드를 작성할 수 있는지 과정을 풀어가겠다.

 

01

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    if(h1.style.color ==="blue") {
    h1.style.color = "tomato";
    } else {
    h1.style.color = "blue";
    }
}

h1.addEventListener("click", handleTitleClick);

document로 html에 접근하고 querySelector()로 CSS선택자를 만족하는 Element에 접근한다.

 

+

querySelector() 함수는 선택자에 부합하는 요소들 중 첫번째 요소만 반환

querySelectorAll() 함수를 이용하면 선택자에 부합하는 모든 요소를 반환

 

document의 addEventListener("click") 메서드와 handleTitleClick함수를 이용하여 클릭 이벤트가 발생할 때 색을 변경한다.

함수내에서 if을 사용해 style.color 메소드로 간단하게 색을 변경할 수 있다.

하지만 style.color를 계속 호출하는 것보단 색상을 현재 상태에 저장하는 것을 해보자!

 

02

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor ==="blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

변수를 선언할 때 const/let을 사용할 수 있는데 차이점은 const는 값을 변경할 수 없고, let은 값을 변경할 수 있다.

02처럼 코드를 작성하면 클릭 이벤트가 발생했을 때

currentColor가 blue일 때 tomato로 색이 변경되고, tomato일 때 blue로 변경된다.

하지만 element의 style을 JavaScript에서 변경하는것은 다른 언어가 섞이이기 때문에 별로 좋지 않다.(개인차)

JavaScript는 상호작용을 만들어내는데 적합. Style은 CSS의 영역!

 

03

#CSS

body{
    background-color: beige;
}

h1 {
    color: cornflowerblue;
}

.active {
    color: tomato;
}

h1의 기본값을 파란색으로 지정해주고 .active라는 class를 생성하여 color를 tomato로 지정해준다.

그럼 어떤 element라도 tomato의 색깔을 가지게 된다.

이제 JS의 h1에 active class를 전달해보자.

 

//Javascript

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click", handleTitleClick);

 

h1.className = "css 클래스 name"을 적는다.

그럼 JS가 HTMl을 변경할 것이고 CSS는 HTML을 보고있다가 h1을 클릭되면 색상을 변경해 줄 것이다.

className은 getter이자 setter이다. 

즉, className의 값을 얻어올 수도 있지만 변경할수도 있는 것이다.코드가 이렇게 진행되면 h1을 클릭했을 때 색이 변경되고 className이 없었다가 "acive"로 생성된다.(이건 html을 열어서 검사창(F12)를 통해 확인 가능함)

 

하지만 h1의 기본값 blue에서 h1을 클릭했을 때 색이 tomato로 변하면서 className이 "clicked"로 생성되고,

또 다시 클릭했을 때 색이 blue로 변하면서 className을 없애고 싶다면 어떻게 해야할까? 한번 해보도록 하자.

 

04

#CSS

body{
    background-color: beige;
}

h1 {
    color: cornflowerblue;
    transition: color .5s ease-in-out;
}

.clicked {
    color: tomato;
}

.sexy-font {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

class의 이름을 clicked로 변경해주고 겸사겸사 h1에 멋진 transition효과도 줘본다.

이러면 글자의 색이 천천히 바뀐다.

그리고 sexy-font class를 추가하여 글씨체의 변화도 준다.

 

//Javascript

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const clickedClass = "clicked";
    if (h1.className  === clickedClass) {
        h1.className = "";
    } else {
        h1.className  = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick);

const clickedClass = "clicked";

JS에서 코드의 중복 사용과 error 방지, 수정을 용이하게 하기 위해 const를 만들어 CSS class를 저장해준다.

 

    <div class="hello">
        <h1 class="sexy-font">Click me!</h1>
    </div>

HTML 파일에서 h1의 clss를 sexy-font로 설정하면 h1은 sexy-font class와 함께 시작하게 되며

JS코드를 통해 h1 클릭시 class name은 "clicked"로 " "로 가차없이 교체될 것이다. ㅋㅋㅋㅋㅋㅋㅋ

하지만 이러면 최초의 class name이 없어져버린다는 문제가 생긴다.

최초의 class name을 잃어버리지 않는 코드로 변경해보자.

05

//JavaScript

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) {
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick);

className → classList로 변경.

className은 이전의 class들을 상관하지 않고 모든걸 교체해버리고,

classList는 class들을 목록으로 작업(조작)할 수 있게 허용해준다.

classList에는 사용할만한 function들이 있는데 contains, remove, add를 사용해보도록 하겠다.

contains는 내가 명시한 class가 HTML element의 class에 포함되어 있는지 확인해주는 위에 작성된 코드를 보면 classList가 clicked를 포함하고 있는지만 확인한다.

remove와 add는 말 그대로이다. remove는 clickedClass가 h1의 class에 포함되어 있다면 제거해 줄 것이고

add는 clickedClass가 h1의 class에 포함되어 있지않다면 추가해 줄 것이다.

 

이렇게 작성된 코드를 실행하면 최종적으로 우리가 목표했던 것처럼 HTML 파일이 실행될 것 이다.

하지만 이 모든걸 한 줄로 끝내버릴 수 있는 functoin인 toggle 있으니 살펴보도록 하자

 

06

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click", handleTitleClick);

05에서 봤던 5줄의 코드는 toggle을 이용하면 1줄로 끝내버릴 수 있다!!!!!!!!!!

이렇게 실행한 코드는 05와 똑같이 그리고 최종 목표였던 상단의 동영상과 똑같이 작동한다.

toggle은 h1의 classList에 clicked class가 있는지 확인하고 만약 있다면 clicked를 제거하고 없으면 clicked를 classList에 추가해준다.

이게 바로 기본적으로 toggle이 하는 일이다. 

---

진짜 이 모든게 toggle 하나로 끝나버리다니 진짜 JS 너무 재밌고 너무 신기하다.

노마드코더 강의를 통해 이렇게 강력하고 재미있는 기능을 단계별로 알아갈 수 있다는게 그저 행복이다.

남은 강의도 잘따라가면서 내것으로 만들어야지