[jQuery] 제이쿼리 클래스(Class) 생성(addClass), 삭제(removeClass), 토글(toggleClass), hasClass

jQuery 에서 Element(요소)의 class 속성에 대해 컨트롤 할 때 사용하는 메서드

 

addClass	속성 값 추가	$("p").addClass("속성 값");	선택된 요소의 class 속성값을 추가
removeClass	속성 값 삭제	$("p").removeClass("속성 값");	선택된 요소의 class 속성값이 있으면 삭제
toggleClass	속성 값 추가 및 삭제	$("p").toggleClass("속성 값");	선택된 요소에 속성값이 없으면 추가하고 있으면 삭제
hasClass	속성 값 확인	$("p").hasClass("속성 값");	선택된 요소의 속성값의 존재 여부에 따라서 True, False 반환

 

 

예제 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

	$(document).ready(function () {

		// 마우스 오버시 add 추가
		$(".sub1").mouseover(function () {
			$(this).addClass("add");
		});

		// 마우스 리브 add 삭제
		$(".sub1").mouseleave(function () {
			$(this).removeClass("add");
		});

		// 마우스 클릭시 add 클래스 toggle, hasClass
		$(".sub1").click(function () {
			$(this).toggleClass("add2");
			console.log($(this).hasClass("add2"));
		});

    });
</script>

<div class="main">
	main
	<div class ="sub1">
		Sub 1
	</div>
</div>

<style>
	.main{
		width:400px;
		height:100px;
		background-color:red;
	}

	.sub1{
		width:300px;
		margin:5px 5px 5px 5px;
		background-color:yellow;
	}

	.add {
		width:200px;
	}
	.add2 {
		width:400px;
	}
</style>

 

결과 화면