SeouliteLab

jQuery의 .toggleClass() 메서드: 클래스 토글하기 본문

프로그래밍

jQuery의 .toggleClass() 메서드: 클래스 토글하기

Seoulite Lab 2024. 3. 27. 10:58

jQuery의 .toggleClass() 메서드는 선택한 요소에서 클래스의 존재 여부를 확인하고, 클래스가 존재하지 않으면 추가하고 존재하면 제거합니다. 이를 통해 요소의 클래스를 쉽게 토글할 수 있습니다.

예제 1: 클래스 토글하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .toggleClass() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 클래스 토글하기 예제
  $('#element1').click(function(){
    $(this).toggleClass('active');
  });
});
</script>
<style>
.active {
  color: red;
}
</style>
</head>
<body>

<div id="element1">클릭하여 클래스 토글</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- <div id="element1">클릭하여 클래스 토글</div> -->

예제 2: 조건에 따라 클래스 토글하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .toggleClass() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 조건에 따라 클래스 토글하기 예제
  var condition = true;
  $('#element2').click(function(){
    if (condition) {
      $(this).toggleClass('active');
    }
  });
});
</script>
<style>
.active {
  color: blue;
}
</style>
</head>
<body>

<div id="element2">조건에 따라 클래스 토글</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- <div id="element2">조건에 따라 클래스 토글</div> -->

예제 3: 다중 클래스 토글하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .toggleClass() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 다중 클래스 토글하기 예제
  $('#element3').click(function(){
    $(this).toggleClass('active highlight');
  });
});
</script>
<style>
.active {
  color: red;
}
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>

<div id="element3">다중 클래스 토글</div>

</body>
</html>
<!-- 출력 결과 -->
<!-- <div id="element3">다중 클래스 토글</div> -->
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 callbacks.disable() 메서드: 콜백 함수 비활성화하기  (0) 2024.03.27
jQuery의 .val() 메서드: 입력 요소의 값 가져오기 및 설정하기  (0) 2024.03.27
jQuery의 .removeProp() 메서드: 속성 제거하기  (0) 2024.03.27
jQuery의 .removeClass() 메서드: 클래스 제거하기  (0) 2024.03.27
jQuery의 .removeAttr() 메서드: 속성 제거하기  (0) 2024.03.27
'프로그래밍' Related Articles more