순수 JavaScript로 요소 클래스 전환: 종합 가이드

소개

JavaScript에서 요소 클래스 제어는 동적 웹 개발에 매우 ​​중요합니다. 일반적인 작업 중 하나는 클래스를 전환하여 요소의 모양이나 기능을 변경하는 것입니다. jQuery는 이 작업을 간단하게 만들었지만 순수 JavaScript를 사용하여 이를 수행하는 방법을 이해하는 것이 중요합니다.

jQuery 솔루션 및 JavaScript 동등 항목

제공된 jQuery 코드는 전환 클래스() 메서드를 사용하여 지정된 요소에 대한 메뉴 숨김 및 숨겨진 전화 클래스.

JavaScript 동등 항목:

• 옵션 1(classList.toggle):

최신 브라우저는 classList.toggle() 메서드를 지원합니다. 예:

var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

• 옵션 2(기존 브라우저용 classList.js):

이전 브라우저 classlist.js 라이브러리를 사용하여 classList.toggle()을 구현할 수 있습니다. 예:

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');

ID 사용에 대한 설명

참고로 JavaScript 코드에서는 ID를 사용하지 않는 것이 좋습니다. ID는 JavaScript 창 개체로 누출되는 전역이므로 예기치 않은 동작과 잠재적인 메모리 누출이 발생할 수 있습니다. 대신, 보다 모듈화되고 캡슐화된 코드를 위해 클래스를 사용하세요.