JQuery
230217 JQuery 클래스제어 addClass(), removeClass(), toggleClass()
주영재
2023. 2. 17. 18:39
제이쿼리 클래스 조작 addClass(), removeClass(), toggleClass()
document.getElementByID("").classList.~~
=>
$("").~
-addClass는 클래스를 추가
-removeClass는 클래스를 제거
-toggleClass는 클래스를 토글형식으로
jquery05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="btn" class="btn btn-default">클래스조작</button>
<script>
//js
//document.getElementById("btn").classList.add("myBtn"); //클래스추가
//document.getElementById("btn").classList.remove("myBtn"); //클래스삭제
//jquery
$("#btn").addClass("myBtn"); //클래스추가
$("#btn").removeClass("myBtn"); //클래스삭제
</script>
<button id="tog" class="dark">토글형식</button>
<script>
$("#tog").click(function() {
//js-this.classList.toggle("dark");
$(this).toggleClass("dark");
})
</script>
<style>
.dark{
background-color: black;
}
</style>
</body>
</html>
