JavaScript에서 요소 클래스를 동적으로 관리하려면 어떻게 해야 합니까?

JavaScript를 사용하여 요소의 클래스를 어떻게 동적으로 변경할 수 있나요?

클래스 조작을 위한 최신 HTML5 기술

최신 브라우저 지원 외부 요청 없이 클래스를 추가, 제거 또는 전환할 수 있는 편리한 메서드를 제공하는 classList 속성 library:

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');

크로스 브라우저 솔루션

모든 클래스 변경

기존 클래스를 모두 새 클래스로 바꾸려면 className:

document.getElementById("MyElement").className = "MyClass";

추가 추가 클래스

공백과 새 클래스 이름 추가:

document.getElementById("MyElement").className += " MyClass";

클래스 제거

정규식 바꾸기 사용:

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g , '');

확인 중 클래스가 적용되면

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

이벤트 처리

다음 방법으로 onclick 또는 기타 이벤트에 이러한 작업을 할당할 수 있습니다.

onClick 속성에서 함수 호출:

<button onClick="changeClass()"></button>

addEventListener 사용 JavaScript:

document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript 프레임워크 및 라이브러리

프레임워크와 라이브러리는 jQuery와 같은 작업을 단순화합니다.

위 내용은 JavaScript에서 요소 클래스를 동적으로 관리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!