제이쿼리에서 클래스(class) 이름 추가/삭제

by 조쉬 posted Mar 31, 2021
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

 

▤ 클래스 추가 [addClass]

$(this).addClass('className'); // 클래스에 className  추가(기존 클래스 존재)

$(this).addClass('className1 className2');

 

▤ 클래스 삭제 [removeClass]

 

$(this).removeClass('className'); // 클래스에 className 이 삭제(다른 클래스 그대로)

$(this).removeClass('className1 className2'); 

 

 

▤ 클래스 변경 [attr]

$(this).attr('class','className'); // 클래스 이름이 className로 변경(기존 클래스 사라짐)

 

▤ 클래스 토글 [toggleClass]

$('#subject').click(function(){

$(this).toggleClass('className');

}

// 클래스 이름이 생겼다 사라지다를 반복

 

//※비슷하게 쓰이는 함수로 toggle() 이 있다.

 

$(this).toggle(); // display: none; <-> display: block;

 

 

▤ 클래스명 확인 [hasClass]

$(this).hasClass('className'); // 특정 클래스 포함 여부를 확인

$(this).hasClass('className1 clsssName2');