HTML DOMTokenList toggle() 메서드

정의와 사용법

toggle() 메서드는 지정된 태그를 목록에서 제거하고 false를 반환합니다. 태그가 존재하지 않으면 추가하고 true를 반환합니다。

예시

예제 1

"myStyle"의 열림/닫힘을 전환합니다：

const list = element.classList;
list.toggle("mywStyle");

직접 시도해 보세요

예제 2

"myStyle" 클래스를 요소에 추가합니다：

const list = element.classList;
list.add("myStyle");

직접 시도해 보세요

예제 3

요소에서 "myStyle" 클래스를 제거합니다：

const list = element.classList;
list.remove("myStyle");

직접 시도해 보세요

例子 4

向元素添加多个类：

element.classList.add("myStyle", "anotherClass", "thirdClass");

직접 시도해 보세요

例子 5

从一个元素中删除多个类：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

직접 시도해 보세요

例子 6

获取元素的类数量：

let numb = element.classList.length;

직접 시도해 보세요

例子 7

下拉按钮创建切换类：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

직접 시도해 보세요

문법

domtokenlist.toggle(token)

매개변수

매개변수 설명
token 필수. 전환할 토큰.

반환 값

없음.

브라우저 지원

domtokenlist.toggle()는 DOM Level 4 (2015) 기능입니다.

모든 브라우저가 지원합니다:

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원

Internet Explorer 11(또는 이전 버전)는 domtokenlist.toggle()를 지원하지 않습니다.

관련 페이지

length 속성

item() 메서드

add() 메서드

remove() 메서드

replace() 메서드

forEach() 메서드

entries() 메서드

keys() 메서드

values() 메서드

DOMTokenList 객체