javascript_class 확인, 추가, 변경, 삭제

class

• 추천하는 쓰임새 : js로 mouseenter/leave 쓸 때 hover과 다르게 마우스를 떼도 적용한 것이 풀리지 않는다.
  그래서 enter -> 클래스 추가 / leave -> 클래스 삭제 로 진행하면 좋다.

class 확인

1. 요소.className
   • 특정 요소의 클래스 값을 문자형태로 가져온다.
   • (실수로라도) 해당 요소의 클래스 명에 빈칸들이 있으면 split(" ")로 분리시킬 때 방번호 잡기 힘들다.
     el_box.className;
2. 요소.classList
   • 배열로 가져옴
   • (클래스가 하나만 있어도 0번방)
   • (읽기 전용 프로퍼티) -> 라고는 하지만
     el_box.classList;

class 추가

• 요소.classList.add('클래스명')
  • el_box.classList.add('bg_red');
  • el_box.classList += 'bg_red'; add랑 +=랑 같아서 이렇게 써도 된다.
    하지만 el_box.classList = 'bg_red 이렇게 쓰게 되면 기존에 있던 클래스들을 다 bg_red로 덮게 되므로 주의할 것
  • 2개 이상 추가하고 싶다면 el_box.classList.add('bg_red', 'font'); 이렇게 쉼표로 구분해서 추가하면 됨
  • += 로 쓰려면 el_box.classList += 'bg_red font'; 이렇게 따옴표 안에 띄어쓰기로 구분해서 넣으면 된다.

class 변경

• 요소.classList.replace("없앨 클래스명", "변경할 클래스명");
  (replaceAll은 없다. )
  • el_box.classList.replace('bg_red', 'bg_blue');

class 삭제

1. 요소.classList.remove("없앨 클래스명");
   • el_box.classList.remove('bg_green');
   • 2개 이상 삭제하고 싶다면 el_box.classList.remove('bg_green', 'bg_blue');

   for(let i = 0; i < el_box.classList.length; i++){
       el_box.classList.remove(el_box.classList[0]);
   }

   • 전체 삭제하고 싶다면 위와같이 for문 돌려서 지우면 된다.
   • 하지만 위 방법들 보단 el_box.className = ""; 이 한 줄이면 끝난다.

toggle

• 해당 요소에 클래스가 있으면 삭제, 없으면 넣어준다.
  el_box.classList.toggle('bg_red'); -> 현재 el_box에 bg_red 없으니까 삽입
  el_box.classList.toggle('bg_red'); -> 윗줄에서 넣고 왔으니까 있음. 그래서 삭제.

  let chk = true;
  el_box.addEventListener('click', function(){
      if(chk){
          el_box.classList.add('bg_blue');
      }else{
          el_box.classList.remove('bg_blue');
      }
      chk = !chk;
  });

  ---

  el_box.addEventListener('click', function(){
      el_box.classList.toggle('bg_blue');
  });

  • toggle을 쓰면 간편하다.

contains

• 해당 요소에 클래스가 있는지 확인
  • 있으면 true, 없으면 false
    el_box.classList.contains('bg_blue');