jQuery 클래스 제어 method

🍫 클래스 넣기 빼기 method

  • addClass() : 선택요소에 클래스 넣기
  • removeClass() : 선택요소에 클래스 빼기
  • toggleClass() : 선택요소에 클래스 넣기 / 빼기

! 적용하기 위해서는 미리 CSS에 추가 혹은 제거할 class를 작성해 놓는다.
(class를 적을땐 변경할 해당 태그 셀렉팅을 꼭 해준다.)

ex

<style>

  container div.active {
     background-color : red;
  } 
  // container 태그의 자식요소인 div태그에 (.activ)라는 걸 상황에 따라 적용하고 싶당
  
</style>

<script>

  $('.add-btn').click(function() {
    $('container div').addClass('active');
  })

    html 내 '.add-btn' 클래스명을 가진 요소를 클릭했을 시,
    container의 자식요소인 div태그에 미리 정의해놓았던 'active'라는 클래스를 추가함
</script>

! 만약 위 예시에서 이미 container div 요소가 background-color요소를 가지고 있었다면, 그 위에 addClass로 추가한 것을 덮어쓴다.
! addClass('') 에서는 작은 따옴표 안에 .className 이 아닌 className으로 적어야한다. 일반적인 css class 셀렉팅 방식과 다르니 주의하자.

좋은 웹페이지 즐겨찾기