바닐라 JavaScript를 사용하여 CSS 클래스를 제거하는 방법은 무엇입니까?

CSS 클래스 제거: 종합 JavaScript 가이드

바닐라 JavaScript를 사용하여 요소에서 CSS 클래스를 제거하는 것은 웹 개발자가 직면하는 일반적인 작업입니다. . 단순화된 API를 제공하는 jQuery와 달리 JavaScript는 이 작업에 대한 다재다능하고 낮은 수준의 접근 방식을 제공합니다.

CSS 클래스를 효과적으로 제거하기 위해 선호되고 표준화된 기술은 classList 속성을 활용하는 것입니다. 최신 브라우저에서 지원되므로 정확한 클래스 조작이 가능합니다.

솔루션

다음 스니펫은 올바른 구문을 보여줍니다.

ELEMENT.classList.remove("CLASS_NAME");

이 코드 스니펫 대상 요소에서 지정된 클래스(CLASS_NAME)를 제거합니다. (ELEMENT).

예

div에서 "red" 클래스 제거를 전환하는 버튼이 있는 다음 예를 고려해 보세요.

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
};

.red {
  background: red
}

<div>

"클래스 제거" 버튼을 클릭하면 "빨간색" 버튼이 나타납니다. 배경은 div에서 제거됩니다.

요소 스타일을 정확하게 제어하여 동적 웹페이지를 유지하려면 JavaScript로 CSS 클래스를 제거하는 방법을 이해하는 것이 중요합니다.

위 내용은 바닐라 JavaScript를 사용하여 CSS 클래스를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!