jQuery의 addClass() 메소드는 선택된 HTML 항목에 클래스 이름을 추가하는데 사용합니다. 이는 웹 페이지에 있는 특정한 HTML 항목에 스타일을 추가하고 싶을 때 특히 유용합니다. 예를 들어 첫 번째 문장의 글자 크기와 색을 바꾸고 싶을 때 원하는 CSS 스타일을 특정한 클래스 이름으로 만든 다음 addClass() 메소드를 이용해 그 문장에 클래스 이름을 추가하면 방금 만든 스타일이 그 문장에 적용됩니다.
jQuery addClass() 메소드 문법
$(selector).addClass(classname)여기서 클래스 classname은 선택된 HTML 항목에 추가하고 싶은 클래스 이름입니다. 또한 두개 이상의 클래스 이름을 한번에 추가할 수 있는데 이는 다음과 같이 공백으로 구분된 클래스 이름을 나열하면 됩니다.
$(selector).addClass(classname1 classname2 classname3...)jQuery addClass() 메소드 예제
이 예제에서는 addClass() 메소드를 사용하여 첫 번째 문장에 big 이라는 클래스 이름을 추가할 것 입니다. addClass() 메소드는 버튼 클릭 함수안에서 사용할 것 입니다. 사용자가 버튼을 클릭하면 첫 번째 문장에 big 이라는 클래스 이름이 추가되고 이 이름으로 정의된 스타일이 적용됩니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.big {
font-size: 200%;
color: green;
}
</style>
</head>
<body>
<h1>jQuery addClass 메소드 예제</h1>
<p>이 문장은 첫 번째 문장입니다.</p>
<p>이 문장은 두 번째 문장입니다.</p>
<button>첫 번째 문장 스타일 바꾸기</button>
<script>
$("button").click(function () {
$("p:first").addClass("big");
});
</script>
</body>
</html>위의 코드를 index.html에 입력 후 실행하면 다음과 같은 화면을 볼 수 있습니다.
여기서 아래 쪽 버튼을 누르면 클래스가 적용되어 아래와 같은 화면이 나타납니다.
jQuery addClass() 메소드로 하나 이상의 클래스 추가하기
이 예제는 HTML 항목에 하나 이상의 클래스 이름을 추가하는 방법을 보여줍니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.big {
font-size: 200%;
color: green;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>jQuery addClass 메소드 예제</h1>
<p>이 문장은 첫 번째 문장입니다.</p>
<p>이 문장은 두 번째 문장입니다.</p>
<button>첫 번째 문장 스타일 바꾸기</button>
<script>
$("button").click(function () {
$("p:first").addClass("big highlight");
});
</script>
</body>
</html>이 코드를 실행하면 다음과 같은 화면이 나옵니다.
아래 쪽 버튼을 누르면 첫 번째 문장에 두개의 클래스가 추가되는 것을 확인할 수 있습니다.
함수를 사용해 클래스 추가
이 예제에서는 함수를 사용해 addClass() 메소드를 실행해 보겠습니다. 이는 HTML 항목의 순서에 따라 여러가지 다른 스타일을 할당할 수 있습니다. 여기서 할당되는 스타일은 매개변수로 전달된 함수의 인자로 결정할 수 있습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.paragraph0 {
color: green;
}
.paragraph1 {
color: yellow;
}
</style>
</head>
<body>
<h1>jQuery addClass 메소드 예제</h1>
<p>이 문장은 첫 번째 문장입니다.</p>
<p>이 문장은 두 번째 문장입니다.</p>
<button>문장 스타일 바꾸기</button>
<script>
$("button").click(function () {
$("p").addClass(function (n) {
return "paragraph" + n;
});
});
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 화면이 나타납니다.
문장 스타일 바꾸기 버튼을 누르면 다음과 같이 문장 마다 각기 다른 스타일이 적용된 것을 확인할 수 있습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [jquery] 자바스크립트 클래스 이름 지우기 (2) | 2022.10.07 |
|---|---|
| [jquery] 자바스크립트 클래스 이름 확인하기 (0) | 2022.10.07 |
| [jquery] 자바스크립트 숨기기 보이기 (2) | 2022.10.05 |
| [jquery] 자바스크립트 버튼 클릭 (2) | 2022.10.05 |
| [javascript] 자바스크립트 팩토리얼 계산하기 (factorial) (2) | 2022.09.29 |
댓글