안녕하세요. 혀코입니다.
이번 시간에는 jQuery에서 addClass, removeClass 사용하는 방법에 대해서 알아보겠습니다.
jQuery에서 addClass를 사용하면, selector로 잡은 html 태그에 class를 지정할 수 있으며, removeClass를 사용하면, selector로 잡은 html 태그에 class를 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery - addClass & removeClass</title>
<style>
.red {
color: red;
}
</style>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<p>Hello World</p>
</div>
<script>
$('div p').addClass('red');
</script>
</body>
</html>div 태그의 p 태그에는 원래 class 가 없는데, addClass를 사용해서 red class를 추가해줬습니다. style에는 red 클래스로 글자색을 빨간색으로 설정해두었기 때문에 결과적으로 글자는 Hello World가 빨간색 글자로 표시됩니다.
이번에는 removeClass 를 사용해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery - addClass & removeClass</title>
<style>
.purple {
color: purple;
}
</style>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<p class="purple">Hello World</p>
</div>
<script>
$('div p').removeClass('purple');
</script>
</body>
</html>div 태그의 p 태그에 purple 클래스가 추가되어있는 상태입니다. purple 클래스는 글자색을 보라색으로 지정해준 클래스입니다. 이 상태에서 jQuery removeClass를 사용해서 purple 클래스를 빼면 글자의 default 색인 검정색 글씨를 표시하게 됩니다.
이렇게 jQuery에서 addClass, removeClass 사용하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글