기존 클래스를 덮어쓰지 않고 HTML 요소에 새 클래스를 추가하는 방법은 무엇입니까?

기존 요소에 추가 클래스를 추가하는 방법

목표:
추가 클래스로 HTML 요소 향상

시나리오:
기존 클래스가 있는 요소가 주어지면 원래 클래스를 덮어쓰지 않고 새 클래스를 추가하는 것이 목표입니다.

해결책 :

현대용 브라우저

classList 속성을 활용하면 요소에 클래스를 쉽게 추가할 수 있습니다.

element.classList.add("my-class");

마찬가지로 클래스를 제거하려면:

element.classList.remove("my-class");

레거시 지원의 경우

Internet Explorer 9와 같은 이전 브라우저에 맞춰 요소의 className 속성을 다음과 같이 수정하세요. 공백 뒤에 새 클래스 이름을 추가합니다. 전제 조건으로 편리한 액세스를 위해 요소에 ID를 할당합니다.

<div>

그런 다음 JavaScript를 사용합니다.

var d = document.getElementById("div1");
d.className += " otherclass";

기존 클래스를 유지하려면 "otherclass" 앞에 공백을 포함해야 합니다.

추가 고려 사항

Mozilla 참조 element.className에 대한 포괄적인 문서를 제공하는 개발자 네트워크(MDN).

위 내용은 기존 클래스를 덮어쓰지 않고 HTML 요소에 새 클래스를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!