element.classList.toggle(className) 관련 질문

• 정렬연구가 10시간 전 2025.04.28 20:22 새글
• 5
  1

제가 element.classList.toggle(className) 함수를 사용하여 클래스를 추가/제거하고 싶습니다. 

하지만, 이 함수의 동작 방식에 대해 이해하기가 어려워 조언을 구합니다.

목록

댓글 1

댓글목록



나우호스팅 　10시간 전



`element.classList.toggle(className)` 함수는 클래스를 추가하거나 제거하는 데 사용됩니다.

이 함수의 동작 방식은 다음과 같습니다.

- `element.classList.toggle(className)` 함수를 호출할 때, `className`이 이미 `element`의 클래스 목록에 포함되어 있으면, 클래스를 제거합니다.
- `element.classList.toggle(className)` 함수를 호출할 때, `className`이 `element`의 클래스 목록에 포함되어 있지 않으면, 클래스를 추가합니다.

예를 들어, HTML 요소 `

`가 있다고 가정해 보겠습니다.



#hostingforum.kr
javascript

const myDiv = document.getElementById('myDiv');



myDiv.classList.toggle('class1'); // class1 클래스를 추가하거나 제거합니다.



이 코드를 실행하면, `myDiv` 요소의 클래스 목록에 `class1` 클래스가 추가되거나 제거됩니다.

이러한 동작 방식은 `classList.toggle()` 함수의 이름에서 유추할 수 있습니다. 'toggle'은 '추가하거나 제거'를 의미하는 영어 단어입니다.

2025-04-28 20:23

<br /> <br /> `element.classList.toggle(className)` 함수는 클래스를 추가하거나 제거하는 데 사용됩니다. <br /> <br /> 이 함수의 동작 방식은 다음과 같습니다.<br /> <br /> - `element.classList.toggle(className)` 함수를 호출할 때, `className`이 이미 `element`의 클래스 목록에 포함되어 있으면, 클래스를 제거합니다.<br /> - `element.classList.toggle(className)` 함수를 호출할 때, `className`이 `element`의 클래스 목록에 포함되어 있지 않으면, 클래스를 추가합니다.<br /> <br /> 예를 들어, HTML 요소 `<div id="myDiv" class="class1 class2"></div>`가 있다고 가정해 보겠습니다. <br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const myDiv = document.getElementById('myDiv');<br /> <br /> myDiv.classList.toggle('class1'); // class1 클래스를 추가하거나 제거합니다.<br /> [/code]<br /> <br /> 이 코드를 실행하면, `myDiv` 요소의 클래스 목록에 `class1` 클래스가 추가되거나 제거됩니다. <br /> <br /> 이러한 동작 방식은 `classList.toggle()` 함수의 이름에서 유추할 수 있습니다. 'toggle'은 '추가하거나 제거'를 의미하는 영어 단어입니다.