jQuery 클래스 속성 변경 (addClass/hasClass/removeClass)
클래스 설정
HTML 요소의 class 속성은 여러 개의 class 값을 가질 수 있습니다.
제이쿼리는 HTML 요소의 class 속성 값을 손쉽게 다루기 위한 여러 메서드를 제공합니다.
이를 통해 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있습니다.
이렇게 클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가 또는 제거하는 것이 가능합니다.
물론 해당하는 class에는 스타일이 css에 선언되어야겠죠?
물론 attr()를 사용하거나 css()를 사용할 수도 있습니다.
하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다.
- 코드와 스타일이 분리되지 못하여 유지보수에 단점
- 인라인으로 적용된 스타일을 변경시 !important 키워드가 필요할 수 있음
이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다.
addClass
addClass() 속성을 사용하면 특정 요소에 새로운 클래스를 추가할 수 있습니다. 이미 가지고 있는 클래스는 더 이상 추가되지 않습니다.
단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것입니다.
| 유형 | 설명 | |
| .addClass (className) | 문자열 | 일치하는 각 요소의 클래스 속성에 추가 할 하나 이상의 공백으로 구분 된 클래스입니다. |
| .addClass (classNames) | 배열 | 일치하는 각 요소의 클래스 속성에 추가 할 클래스 배열입니다. |
| .addClass (함수) | 함수 ( 정수 인덱스, 문자열 currentClassName) => 문자열 |
하나 이상의 공백으로 구분 된 클래스 또는 기존 클래스 이름에 추가 할 클래스 배열을 반환하는 함수입니다. 집합에있는 요소의 인덱스 위치와 기존 클래스 이름을 인수로 받습니다. 함수 내에서 this집합의 현재 요소를 참조합니다. |
다음과 같이 일치하는 요소 집합에 공백으로 구분하여 한 번에 둘 이상의 클래스를 추가할 수 있습니다.
종종 다음과 같이 .removeClass()요소의 클래스를 다른 클래스로 전환하는 데 사용됩니다.
|
$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" ); //배열
$( "ul li" ).addClass(function( index ) { //
return "item-" + index;
});
|
cs |
.addClass()이미 "red"클래스가 있는 div에 "green"클래스를 추가하는 함수를 전달하는 예제입니다.
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>이 div는 흰색이어야합니다.</div>
<div class="red">이 div는 이제 "green"및 "red"클래스가 있으므로 녹색이됩니다.
addClass 함수가 실패하면 빨간색으로 표시됩니다.</div>
<div>이 div는 흰색이어야합니다.</div>
<p>녹색 div가 하나 있습니다.</p>
<script>
$("div").addClass(function (index, currentClass) {
var addedClass;
if (currentClass === "red") {
addedClass = "green";
$("p").text("There is one green div");
}
return addedClass;
});
</script>
</body>
</html>
|
cs |
hasClass
.hasClass() 메서드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지 유무를 확인할 수 있습니다.
둘 이상의 클래스가 할당 될 수 있습니다.
HTML에서는 클래스 이름을 공백으로 구분하여 표시합니다.
|
$("선택자").hasClass("클래스이름");
|
cs |
반환값으로 엘리먼트에 클래스의 존재 여부를 나타내는 불리언 값을 가집니다.
. hasClass()는 엘리먼트에 지정된 각 클래스명을 비교해서 하나라도 일치하는 클래스를 찾으면 true를 반환합니다.
다음 코드를 실행하면 모두 true 값을 반환한다.
클래스로 '선택됨'이 포함 된 단락을 찾는 예제입니다.
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hasClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>이 단락은 검은 색이며 첫 번째 단락입니다.</p>
<p class="selected">이 단락은 빨간색이며 두 번째 단락입니다.</p>
<div id="result1">첫 번째 단락이 클래스를 선택했습니다: </div>
<div id="result2">두 번째 단락이 클래스를 선택했습니다 : </div>
<div id="result3">하나 이상의 단락에 클래스가 선택됨 : </div>
<script>
$( "#result1" ).append( $( "p" ).first().hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p" ).last().hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
</script>
</body>
</html>
|
cs |
removeClass
remove() 메소드는 선택된 요소를 간편하게 제거하여줍니다.
참고로 empty() 또는 detach() 메서드 역시 제거하는 메서드로 비슷하나 동일한 것은 아닙니다.
우선 remove()는 다음과 같이 수행합니다.
- 선택된 자신 및 자식 요소들 모두 삭제함
- 연결된 모든 이벤트 역시 삭제함
위와같이 자신을 포함한 모든 자식 요소들이 삭제되는 것이 특징입니다.
뿐만 아니라 엘리먼트가 가지고 있는 데이터 및 이벤트들도 함께 삭제되는 것이 또 다른 특징입니다.
만약 이를 원치 않을 경우 detach() 메서드를 사용하는 게 좋겠죠.
| 유형 | 설명 | |
| .removeClass ([클래스 이름]) | 문자열 | 일치하는 각 요소의 클래스 속성에서 제거 할 하나 이상의 공백으로 구분 된 클래스입니다. |
| .removeClass (classNames) | 배열 | 일치하는 각 요소의 클래스 속성에서 제거 할 클래스 배열입니다. |
| .removeClass (함수) | 함수 ( 정수 인덱스, 문자열 클래스 이름) => 문자열 |
하나 이상의 공백으로 구분 된 클래스 또는 제거 할 클래스 배열을 반환하는 함수입니다. 집합에있는 요소의 인덱스 위치와 이전 클래스 값을 인수로받습니다. |
일치하는 요소 집합에서 공백으로 구분하여 한 번에 둘 이상의 클래스를 제거할 수 있습니다.
이 메서드는 종종 .addClass()요소의 클래스를 다른 클래스로 전환하는 데 사용됩니다.
아래 예문에서 여기서 myClass및 noClass클래스는 모든 단락에서 제거되고 yourClass 추가됩니다.
. removeClass() 메서드를 사용하면 함수를 전달하여 제거할 클래스를 나타낼 수 있습니다.
아래 예문은 <li>마지막 <li>. 에서 두 번째 클래스 이름을 제거합니다.
|
$( "p" ).removeClass( "myClass yourClass" )
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
$( "li" ).last().removeClass(function() {
return $( this ).prev().attr( "class" );
});
|
cs |