[JavaScript] add와 remove를 한번에! toggle 메서드
자바스크립트 dom에 대해 공부하다가 아주 유용한 메서드를 발견하였다.
그건 바로 toggle 메서드
이다. add()와 remove()가 합쳐진(?) 개념의 메서드이다.
사용법
const title = document.querySelector("#title"); const CLICKED_CLASS = "clicked"; function handleClick() { // const hasClass = title.classList.contains(CLICKED_CLASS); // if (!hasClass) { // title.classList.add(CLICKED_CLASS); // } else { // title.classList.remove(CLICKED_CLASS); // } title.classList.toggle(CLICKED_CLASS); } function init() { title.addEventListener("click", handleClick); } init();
일단 위 코드는 title이라는 id를 가진 태그가 클릭 되었을 시 clicked이라는 클래스를 해당 태그에
추가해 주는 코드이다. 주석 처리된 코드는 add(), remove() 메서드를 사용했을 때의 코드 길이이고
놀랍게도 아래에 있는 한 줄이 toggle() 메서드로 처리했을 때 코드의 길이이다. 놀랍지 않는가!
사용법은 보는 것처럼 정말 간단하다 메서드 이름인 토글처럼 on/off 하고 싶은 것을 괄호 안에 넣으면 끝이다!
Author And Source
이 문제에 관하여([JavaScript] add와 remove를 한번에! toggle 메서드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qldudgh/JavaScript-add와-remove를-한번에-toggle-메서드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)