SeouliteLab

jQuery의 .addClass() 메서드: 요소에 클래스 추가하기 본문

프로그래밍

jQuery의 .addClass() 메서드: 요소에 클래스 추가하기

Seoulite Lab 2024. 3. 27. 10:48

jQuery의 .addClass() 메서드는 선택한 요소에 하나 이상의 클래스를 추가합니다. 이를 통해 동적으로 요소의 스타일이나 동작을 변경할 수 있습니다.

예제 1: 클래스 추가

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

<div id="element1">요소 1</div>

</body>
</html>
/* 스타일시트 */
.highlight {
  background-color: yellow;
}
<!-- 출력 결과 -->
<div id="element1" class="highlight">요소 1</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 .addClass() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 여러 클래스 추가 예제
  $('#element2').addClass('highlight border');
});
</script>
<style>
.highlight {
  background-color: yellow;
}
.border {
  border: 2px solid black;
}
</style>
</head>
<body>

<div id="element2">요소 2</div>

</body>
</html>
/* 스타일시트 */
.highlight {
  background-color: yellow;
}
.border {
  border: 2px solid black;
}
<!-- 출력 결과 -->
<div id="element2" class="highlight border">요소 2</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 .addClass() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 반복문을 이용한 클래스 추가 예제
  $('.item').each(function(){
    $(this).addClass('highlight');
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>

<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>

</body>
</html>
/* 스타일시트 */
.highlight {
  background-color: yellow;
}
<!-- 출력 결과 -->
<div class="item highlight">아이템 1</div>
<div class="item highlight">아이템 2</div>
<div class="item highlight">아이템 3</div>
저작자표시 비영리 변경금지

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

jQuery의 .hasClass() 메서드: 클래스 유무 확인하기  (0) 2024.03.27
jQuery의 .attr() 메서드: 속성 조작하기  (0) 2024.03.27
jQuery의 .width() 메서드: 요소의 너비 가져오기  (0) 2024.03.27
jQuery의 .innerHeight() 메서드: 요소의 내부 높이를 가져오기  (0) 2024.03.27
jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기  (0) 2024.03.27
'프로그래밍' Related Articles more