addClass(), removeClass(), hasClass() 예제
# 제이쿼리 addClass() 정보 및 예제보기아래는 제이쿼리를 사용한 addClass() 메소드입니다. 기본적인 문법은 아래와 같습니다.
$(element).addClass('클래스명');
addClass() 속성을 사용하면 특정 요소에 새로운 클래스를 추가할 수 있습니다. 앞에 언급한 것처럼 이미 가지고 있는 클래스는 더 이상 추가되지 않습니다.
! addClass() 예제보기만약 아래와 같이 span 태그가 존재할 경우 여기에 red 클래스를 주어 폰트색을 변경하는 예제를 만들어 보겠습니다.
<style>
.red { color: red; }
</sytle>
<span>Test addClass</span>
@ red.js
$('span').addClass('red');
위 코드를 실행하면 결과는 아래와 같습니다.
// 적용 전
Test addClass
// 스크립트 적용 후
아래에는 스타일을 제거하는 반대 경우를 알아봅니다.
# removeClass() 정보 및 예제 알아보기아래는 클래스를 제거하는 방법인 removeClass()를 알아봅니다. 먼저 아래와 같이 사용합니다.
$(Element).removeClass('클래스명');
클래스 속성이 가지고 있는 선택한 클래스명을 삭제합니다. 이 메소드는 선택된 클래스 모두를 제거하며 만약 해당 클래스가 없는 경우 아무런 변화가 없습니다. 그럼 아래 예제를 참고하세요.
<body>
<span class="test">Test removeClass</span>
</body>
<script type="text/javascript">
$('span').removeClass('test');
</script>
위 코드를 실행할 경우 아래처럼 class가 제거되어 나타납니다.
<body>
<span class>Test removeClass</span>
</span>
# hasClass() 메소드 정보 및 예제보기아래는 hasClass() 메소드를 알아봅니다. 기본적인 문법은 아래처럼 사용됩니다.
$(Element).hasClass('클래스명');
이 함수는 클래스 속성에 해당 값이 존재하는지를 확인 후 Boolean값을 반환합니다. 즉, 존재한다면 true를 없다면 false를 반환하게 됩니다. 아래 예제를 봐주세요.
<body>
<span class="test">Test hasClass</span>
</body>
<script type="text/javascript">
$('span').hasClass('test');
</script>위 코드를 실행하면 아래와같이 결과가 나타나게됩니다.
// test 클래스명이 존재하기 때문에 true가 반환되었음
즉 클래스가 존재하므로 true값이 반환되었습니다. 만약 없는 경우에는 반대로 false를 반환합니다.
[jQuery] 클래스의 추가, 제거 및 확인, removeClass(), addClass(), hasClass()
제이쿼리로 클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가 또는 제거하는 것이 가능합니다.
webisfree.com
'jQuery' 카테고리의 다른 글
| input:hidden[name=SA1] 이란? 히든 속성 및에 이름이 SA1인 태그 (0) | 2022.12.29 |
|---|---|
| tbody:last 외 유용한 표현식 모음 (3) | 2022.12.25 |
| 상위 요소 선택자(parents(), parents("요소 선택") (0) | 2022.12.05 |
| jQuery 선택자 모음 (0) | 2022.12.05 |
| jquery 비 동기 통신 $.ajax(), $.get(), $.post() 사용방법 (0) | 2022.12.01 |