순수 JavaScript를 사용하여 요소 클래스를 동적으로 전환하는 방법은 무엇입니까?

순수 JavaScript의 요소 클래스 전환: 단순화된 가이드

요소 클래스를 동적으로 수정하는 작업은 순수 JavaScript를 사용하여 수행할 수 있습니다. 이 프로세스를 사용하면 jQuery와 같은 추가 프레임워크나 라이브러리가 필요하지 않습니다.

jQuery 변환:

다음 jQuery 스니펫을 고려하세요.

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

순수 JavaScript 구현:

순수 JavaScript에서 동일한 기능을 구현하려면 classList.toggle() 메서드가 일반적으로 사용됩니다. 이 방법은 대부분의 최신 브라우저에서 지원됩니다.

var menu = document.querySelector('.menu');  // Using a class instead of an ID
menu.classList.toggle('hidden-phone');

참고: JavaScript에서 ID를 사용하면 전역 유출이 발생할 수 있으므로 일반적으로 권장되지 않습니다.

이전 브라우저용 ClassList.js:

classList.toggle()을 기본적으로 지원하지 않는 브라우저의 경우 classlist.js 폴리필을 통합할 수 있습니다.

var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');

이 구현은 안정적입니다. 외부 라이브러리나 프레임워크 없이 클래스를 토글하여 순수 JavaScript로 간결하고 효율적인 접근 방식을 제공합니다.

위 내용은 순수 JavaScript를 사용하여 요소 클래스를 동적으로 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!