기본 JavaScript를 사용하여 요소에서 CSS 클래스를 제거하는 방법은 무엇입니까?

네이티브 JavaScript를 사용하여 요소에서 CSS 클래스 제거

JavaScript를 사용하여 HTML 요소에서 CSS 클래스를 제거하는 작업은 타사에 의존하지 않고도 수행할 수 있습니다. jQuery와 같은 파티 라이브러리. 다음은 단계별 지침입니다.

1. 대상 요소 식별:

document.querySelector() 메서드를 사용하여 클래스를 제거하려는 HTML 요소를 선택합니다. 요소의 ID 또는 다른 고유 식별자를 지정하세요.

2. classList 속성 사용:

최신 브라우저는 모든 요소에서 classList 속성을 지원합니다. 요소에 적용된 CSS 클래스 목록을 나타내는 속성입니다.

3. 클래스 제거:

클래스를 제거하려면 classList.remove() 메서드를 사용하고 클래스 이름을 인수로 전달하면 됩니다. 예:

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

예:

다음 코드 조각은 실제 요소에서 "빨간색" CSS 클래스를 제거하는 방법을 보여줍니다. 시나리오:

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};

HTML:

<div>

CSS:

.red {
  background: red;
}

"클래스 제거" " 버튼을 클릭하면 "빨간색" CSS 클래스가 요소에서 제거되고 배경색이 기본값입니다.

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