클래스 설정
클래스 설정
HTML 요소의 class 속성은 여러 개의 class 값을 가질 수 있습니다.
제이쿼리는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공합니다.
이를 통해 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있습니다.
1. .addClass()
2. .removeClass()
3. .toggleClass()
4. .hasClass()
클래스의 추가 및 제거
.addClass() 메소드로 클래스를 간단히 추가하고, .removeClass() 메소드로 클래스를 손쉽게 제거할 수 있습니다.
예제
$(function() {
$("#addBtn").on("click", function() {
// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함.
$("#first, #third").addClass("lined");
});
$("#removeBtn").on("click", function() {
// id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함.
$("#first, #third").removeClass("lined");
});
});
단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것입니다.
또한, .toggleClass() 메소드를 이용하여 클래스의 추가와 제거를 번갈아 시행할 수도 있습니다.
다음 예제는 .toggleClass() 메소드를 이용하여 위의 예제를 더욱 간결하게 만든 예제입니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.
$("#first, #third").toggleClass("lined");
});
});
클래스의 확인
.hasClass() 메소드를 이용하여 해당 요소가 특정 클래스에 포함되어 있는지를 확인할 수 있습니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.
var result = $("#target").hasClass("lined");
$("#text").html(result);
});
});
클래스 설정에 관한 메소드
| 메소드 | 설명 |
|---|---|
|
.addClass() |
선택한 요소에 인수로 전달받은 클래스를 추가함. |
|
.removeClass() |
선택한 요소에서 인수로 전달받은 클래스를 제거함. |
|
.ToggleClass() |
선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함. |
| .hasClass() | 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함. |
