JavaScript를 사용하여 요소에서 CSS 클래스를 어떻게 제거합니까?

JavaScript로 CSS 클래스 제거

JavaScript는 jQuery 없이도 요소에서 CSS 클래스를 제거할 수 있는 직접적인 방법을 제공합니다. 이 방법은 대부분의 최신 브라우저에서 지원되는 classList 속성을 사용합니다.

classList를 사용하여 CSS 클래스를 제거하는 단계:

1. 요소: document.querySelector 또는 document.getElementById를 사용하여 CSS 클래스를 제거하려는 요소를 식별합니다.

2. 클래스 제거: classList.remove를 활용합니다. () 메서드를 사용하여 원하는 CSS 클래스를 제거합니다. 구문은 다음과 같습니다.

   ELEMENT.classList.remove("CLASS_NAME");

예:

ID가 'el'인 요소에서 "red" 클래스를 제거하려면 '인 경우 다음 코드를 사용합니다.

const el = document.querySelector('#el');
el.classList.remove("red");

대체 방법:

classList.remove()가 권장되는 접근 방식이지만 제거를 위한 대체 방법이 있습니다. CSS 클래스:

• .removeAttribute(): 이 메소드는 클래스 이름을 포함한 전체 속성을 제거합니다. 하지만 classList.remove()보다 효율성이 떨어집니다.
• 클래스 속성 바꾸기: 제거하려는 클래스를 제외한 전체 클래스 속성을 새 값으로 바꿀 수 있습니다.

위 내용은 JavaScript를 사용하여 요소에서 CSS 클래스를 어떻게 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!