JavaScript를 사용하여 요소의 클래스를 어떻게 변경합니까?

JavaScript를 사용하여 요소의 클래스를 변경하는 방법

onclick과 같은 다양한 이벤트에 응답하여 JavaScript는 HTML 요소의 클래스를 변경하는 여러 기술을 제공합니다.

최신 HTML5 기술

classList를 지원하는 최신 브라우저의 경우 다음 메서드는 간단한 기능을 제공합니다. 접근 방식:

• document.getElementById("MyElement").classList.add('MyClass');
• document.getElementById("MyElement").classList.remove('MyClass ');
• 만약 (document.getElementById("MyElement").classList.contains('MyClass'))
• document.getElementById("MyElement").classList.toggle('MyClass');

크로스 브라우저 솔루션

더 넓은 브라우저 호환성:

모든 클래스를 변경하려면

• 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를 분리하려면 다음을 사용하는 것이 좋습니다. 기능:

• HTML

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

  로그인 후 복사

• 자바스크립트

  function changeClass() {
    // Code examples from above
  }

  로그인 후 복사

또는, addEventListener 사용:

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

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

jQuery와 같은 라이브러리는 이러한 작업을 단순화합니다.

• 변경하려면 수업

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

  로그인 후 복사

• 수업 추가/삭제 단축키

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

  로그인 후 복사

• 클릭에 기능 할당 이벤트

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

  로그인 후 복사

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