라이브러리
[JAVASCRIPT] element.classList.toggle(className) - 클래스 토글
클래스 toggling
`classList.toggle()` 메소드는 HTML 요소의 클래스 목록에 지정된 클래스를 추가하거나 제거합니다. 이 메소드는 두 개의 매개 변수를 받습니다. 첫 번째 매개 변수는 클래스 이름이고, 두 번째 매개 변수는 옵션입니다.
Syntax
#hostingforum.kr
javascript
element.classList.toggle(className, force)
- `element`: 클래스를 추가하거나 제거할 HTML 요소입니다.
- `className`: 클래스 이름입니다.
- `force`: 옵션입니다. 기본값은 `undefined`입니다. `true`로 설정하면 클래스를 추가하고, `false`로 설정하면 클래스를 제거합니다.
예제
#hostingforum.kr
javascript
// HTML 요소
Toggle 클래스
// JavaScript 코드
const myDiv = document.getElementById('myDiv');
// 클래스를 추가하거나 제거합니다.
myDiv.classList.toggle('active');
// 클래스를 추가합니다.
myDiv.classList.toggle('active', true);
// 클래스를 제거합니다.
myDiv.classList.toggle('active', false);
결과
- 첫 번째 호출에서는 `myDiv` 요소에 `active` 클래스가 추가됩니다.
- 두 번째 호출에서는 `myDiv` 요소에 `active` 클래스가 추가됩니다.
- 세 번째 호출에서는 `myDiv` 요소에 `active` 클래스가 제거됩니다.
사용 사례
- 토글 버튼을 만들 때 사용할 수 있습니다. 버튼을 클릭하면 클래스가 추가되거나 제거됩니다.
- 애니메이션을 만들 때 사용할 수 있습니다. 클래스를 추가하거나 제거하면 애니메이션 효과가 나타납니다.
- UI 요소를 활성화하거나 비활성화할 때 사용할 수 있습니다. 클래스를 추가하면 요소가 활성화되고, 클래스를 제거하면 요소가 비활성화됩니다.
참고
- `classList` 메소드는 HTML5에서 추가된 메소드입니다.
- `classList` 메소드는 `element` 객체의 `classList` 프로퍼티를 사용합니다.
- `classList` 프로퍼티는 HTML 요소의 클래스 목록을 나타냅니다.
- `classList` 메소드는 `element` 객체의 클래스 목록에 지정된 클래스를 추가하거나 제거합니다.
댓글목록
등록된 댓글이 없습니다.