요소의 클래스를 추가하거나 제거하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn{
background-color: red;
font-size: 50px;
font-weight: bold;
width: 200px;
height: 200px;
color: white;
}
.box-style{
background-color: black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button class="btn">클릭</button>
<button class="btn2">이전으로 되돌리기</button>
<!-- jQuery 파일 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
$(".btn")
// .css("background-color", "red")
// .css("font-size", "50px")
// .css("font-weight", "bold")
// .css("width", "200px")
// .css("height", "200px")
// .css("color", "white")
// .css("border", "none")
// .css("cursor", "pointer") // 클릭 가능 커서 모양
.on("click", () => {
$(".btn").addClass("box-style").text("")
});
// 클릭시 이전 스타일로 되돌리는 이벤트
$(".btn2").on("click", () => {
$(".btn").removeClass("box-style").text("클릭");
})
</script>
</body>
</html>클래스 선택자로 CSS 스타일을 만들어 놓고 jQuery로 원하는 요소에 클래스를 CSS의 클래스 선택자로 쓴 클래스를 추가할 것이다. .addClass("클래스이름")로 클래스를 추가해준다. 제거하는 방법은 removeClass("클래스이름")이다.
쉽고만
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex06_animate.html (0) | 2023.06.22 |
|---|---|
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
| Ex04_입력 요소.html (0) | 2023.06.21 |
| Ex02_jQuery.html (0) | 2023.06.21 |
| Ex01_jQuery.html (0) | 2023.06.21 |
