[JavaScript] click event 로 글자 색을 번갈아가며 변경하는 3가지 방법

div.hello 태그 내부에 h1태그가 있음

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

JavaScript에서 querySelector()를 이용해 h1태그를 반환

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

 

addEventListener()메서드로 click event 추가

첫번째

JavaScript 만으로 색을 변경

function handleTitleClick() {
    const curColor = h1Tag.style.color;
    let newColor;
    if(curColor === "blue"){
        newColor = "red";
    }else{
        newColor = "blue";
    }
    h1Tag.style.color = newColor;
}

h1Tag.addEventListener("click", handleTitleClick);

두 개의 변수 curColor와 newColor는 모두 h1Tag의 색을 나타냄

- h1Tag의 색(curColor)이 blue 일 때,

   newColor는 red로 변경

- h1Tag의 색(curColor)이 red 일 때,

   newColor는 blue로 변경

- h1Tag의 색에 newColor 대입

 

두번째

JavaScript는 이벤트를 담당하고 색 변경은 CSS가 담당

- 기본색과 변경색을 다르게 지정한다는 의미는 같지만 각자에게 맞는 역할을 수행

/* CSS */
h1 {
    color: blue;
}
.click {
    color: red;
}

h1 태그에 기본색(blue)을 지정하고 click 클래스를 만들어 해당 클래스에는 다른 색(red)을 지정

function handleTitleClick() {
    const clickedClass = "clicked";
    if (h1Tag.className === clickedClass) { // .className: 특정 element의 클래스 속성값을 가져옴
        h1Tag.className = "";
    } else {
        h1Tag.className = clickedClass;
    }
}

h1Tag.addEventListener("click", handleTitleClick);

CSS 파일에서 red 색을 지정한 클래스명을 변수로 지정해 클릭하면 클래스명이 생기고(red 색 적용) 없어지도록(blue 색 적용) 작성

→ 해당 태그(h1)에 clicked라는 클래스명 외에 다른 클래스명이 존재할 때는 클릭시 함께 없어질 수 있음

function handleTitleClick() {
    const clickedClass = "clicked";
    if (h1Tag.classList.contains(clickedClass)) { // .classList: 특정 element 클래스 목록에 접근
        h1Tag.classList.remove(clickedClass);
    } else {
        h1Tag.classList.add(clickedClass);
    }
}

h1Tag의 클래스 목록에서 조회해서 해당 클래스명만 생기고 없어지도록 작성

 

세번째

생기고 없어지는 것을 번갈아가면서 하는 것을 토글링이라함

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

h1Tag.addEventListener("click", handleTitleClick);

classList에 .toggle을 적용해 토글링, 클래스가 존재하면 제거 - 존재하지 않으면 추가