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

간단한 크로스 브라우저 해결 방법

모든 클래스 변경:

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 이벤트에 대한 작업

HTML 속성에 인라인 JavaScript를 사용하지 마세요. 대신, 함수를 생성하고 onClick 속성에서 호출하세요:

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

또는 addEventListener를 사용하여:

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

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

jQuery 예제

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

전환 클래스:

$('#MyElement').toggleClass('MyClass');

클릭 이벤트 할당:

$('#MyElement').click(changeClass);

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