jQuery addClass() 메서드는 개발자에게 보다 전역적인 방식으로 요소를 변경할 수 있는 방법을 제공합니다. 메서드 이름에서 알 수 있듯이 선택한 요소에 클래스 속성을 추가할 수 있습니다. 왜 우리가 이것을 하고 싶습니까?
제목, 단락 및 클릭할 수 있는 버튼과 같은 일부 기존 요소가 있는 웹 페이지의 예를 들어 보겠습니다. 이 페이지와 함께 이러한 요소의 클래스 이름을 사용하여 스타일을 지정하는 스타일시트가 있습니다. 버튼을 클릭하면 기존 콘텐츠가 스타일이나 모양을 변경할 수 있습니다.
addClass()를 사용할 수 있습니다. 버튼을 클릭한 후 기존 콘텐츠에 대한 새 스타일 속성을 삽입하는 메서드로, 한 줄의 코드만으로 기존 콘텐츠의 스타일을 변경할 수 있습니다. 이렇게 하면 개발자가 스타일이 지정된 방식으로 요소를 조작하는 것에 대해 생각할 수 있습니다.
예제를 더 자세히 살펴보고 어떻게 코딩할 수 있는지 살펴보겠습니다.
jQuery addClass() 작동 방식
이 예에서는 버튼을 클릭할 때 객체의 클래스 속성을 변경하고 있습니다. 이 예제 코드를 시작하기 전에 addClass() 공장. 다음 HTML이 있다고 가정합니다.
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>