JavaScript 요소 클래스를 효율적으로 조작하려면 어떻게 해야 합니까?

JavaScript 클래스 조작 기법

요구에 따라 요소의 클래스 변경

클릭과 같은 이벤트를 기반으로 요소의 클래스를 동적으로 수정하기 위해 JavaScript는 여러 가지 접근 방식을 제공합니다. :

최신 HTML5 클래스 조작

최신 브라우저는 클래스 처리를 단순화하는 classList를 지원합니다.

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');

크로스 브라우저 솔루션

classList가 없는 브라우저의 경우 다음 방법을 사용하세요.

모든 클래스 바꾸기

기존 모든 클래스를 바꾸도록 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 이벤트에 함수 연결

이러한 작업을 함수로 래핑하고 이벤트 핸들러에서 호출하세요:

function changeClass() {
  // Code examples from above
}
document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript Frameworks 및 라이브러리

jQuery와 같은 프레임워크는 클래스 조작을 간소화합니다.

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))
$('#MyElement').click(changeClass);

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