addClass()- 선택한 요소에 하나 이상의 클래스를 추가
removeClass()- 선택한 요소에서 하나 이상의 클래스를 제거
toggleClass()- 선택한 요소에서 클래스 추가/제거 간을 전환
css()- 스타일 속성을 설정하거나 반환
1. addClass()
- 다양한 요소에 클래스 특성을 추가하는 방법
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: green;
}
</style>
</head>
<body>
<h1>CssClass addClass() 실습하기</h1>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div><br>
<button>Add classes to elements</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
</body>
</html>
2. addClass()
- 소드 내에서 여러 클래스를 지정 가능
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: green;
}
</style>
</head>
<body>
<h1>CssClass addClass() 실습하기2</h1>
<hr>
<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<button>Add classes to first div element</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").addClass("important blue");
});
});
</script>
</body>
</html>
3. RemoveClass()
- 다양한 요소에서 특정 클래스 특성을 제거하는 방법
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: green;
}
</style>
</head>
<body>
<h1>CssClass RemoveClass() 실습하기</h1>
<hr>
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove class from elements</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1, h2, p").removeClass("blue");
});
});
</script>
</body>
</html>
4. toggleClass()
- 선택한 요소에서 클래스 추가/제거 간을 전환
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: green;
}
</style>
</head>
<body>
<h1>CssClass toggleClass() 실습하기</h1>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1, h2, p").toggleClass("blue");
});
});
</script>
</body>
</html>
Share article
