5월4일 TIL (class-list)

 

classList - Methods

클래스를 변경 할 수 있는 메소드!

• add(String)
  • 지정한 클래스 값을 추가한다.
  • 만약 추가하려는 클래스가 이미 존재한다면 적용 x

• remove(String)
  • 지정한 클래스 값을 제거한다.
  • 존재하지 않는 클래스라면? 에러 발생 X

 

• contains(String)
  • 지정한 클래스 값이 존재하는지 확인.
  • true, false 값을 반환.

 

• replace(old, new)
  • old class를 new class로 대체

 

• item(Number)
  • 인덱스 값을 활용하여 클래스 값을 반환

classList - toggle

toggle은 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다.

== 만약 class가 있다면, remove를, 클래스가 없다면 add를 적용!!

아주 유용하게 쓰인다 ex) display : none을 적용할 때 클래스가 있었다가~ 없었다가~

 

.is-hidden {
    display: none !important;
}

 

function change() {
    $("#box").toggleClass("is-hidden")
    }

change라는 함수가 실행이 될 때마다 box가 보이다가 안보이다가를 반복!!

!important란?

위에 코드중 있는 이 코드는 상수란 비슷한 개념이다. 위에서 display: none !important를 먹여놓았다. 그러면 그 뒤에

  display : block 을 준다고해도 none을 유지한다. 만약 바꾸고 싶다면 다시 display : block !important를 하게 된다면 바뀐다!!