[JS] 바닐라 자바스크립트 - toggle

zero_0·2021년 12월 16일
1

FE 학습

목록 보기
11/22
post-thumbnail

<들어가기 앞서>
노마드코더 3.8 CSS in Javascript part Three 영상을 보고 학습하며
기록한 내용입니다.


클릭시 글자색이 2개로 바뀌기

/*3.6 CSS in Javascript*/
const h1 = document.querySelector(".hello h1");

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor ==="blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor; //맘에 안드는 코드 css 코드이기 때문
}

h1.addEventListener("click", handleTitleClick);


더 나은 코드로 바꾸기

/*3.6 CSS in Javascript*/

const h1 = document.querySelector(".hello h1");


function handleTitleClick(){
    const clickedClass = "clicked"; //string을 변수에 저장하면 오류가 떠도 에러를 잡아준다.
    if (h1.className === clickedClass) {
      h1.className = "";
    } else {
      h1.className = clickedClass;
    } 
}


// title에 click 이벤트가 발생하면 handleTitleClick 함수가 동작되길 원해!
h1.addEventListener("click", handleTitleClick);

h1.addEventListener("click", handleTitleClick);

스타일을 css에만 넣어주어서 더 깔끔한 코드가 되었다.

body {
    background-color: rgb(255, 233, 199);
}

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

.clicked {
    color: tomato;
}

toggle

문제상황 : 폰트를 추가한 h1에 폰트를 유지한 채 click이벤트도 진행될 수 있도록 만들기 !!

알아야 하는 것 :

  • classList 우리가 class들의 목록으로 작업할 수 있게 해주는데
    className은 이전 calss를 상관하지않고 모든걸 교체해 버린다.

  • classList는 HTML element의 class내용물을 조작하는 것을 허용한다.

  • contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다

    toggle 함수는 토큰이 존재하면 토큰제거
    토큰존재 하지 않으면 토큰 추가한다.
    LIKE 스마트폰 오른쪽 버튼과 같음.(화면 켜기 끄기 기능)
    ex)
    toggle은 h1의 classList에 clicked가 이미 있는지 확인하여
    만약있다면 toggle 이 clicked를 제거해준다
    만약 class name이 존재하지 않는다면 toggle은 class name 추가

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

위의 코드와 아래의 토글코드 하나가 같다.
즉 토글이 짱이다
h1.classList.toggle("clicked");

영문 설명 : If force is not given, "toggles" token, removing it if it's present and adding it if it's not present. If force is true, adds token
-> 토글은 존재하면 제거하고 존재하지 않으면 추가합니다.

profile
차근차근 채워가는 it일지

0개의 댓글