JavaScript를 사용하여 HTML 요소에 클래스를 추가하는 방법은 무엇입니까?

JavaScript에서 요소에 클래스 추가

소개:
요소 기능 향상 웹페이지에는 CSS 클래스 조작이 포함되는 경우가 많습니다. 새 클래스를 추가하면 요소에 추가 스타일이나 동작을 제공할 수 있습니다. 이 답변은 최신 브라우저 및 레거시 브라우저에 대한 지원을 고려하여 JavaScript를 사용하여 요소에 클래스를 추가하는 방법을 설명합니다.

최신 브라우저(Element.classList)
다음을 포함한 최신 브라우저의 경우 Chrome, Firefox 및 Safari에서 element.classList.add() 메서드는 클래스를 클래스에 추가하는 효율적인 방법을 제공합니다. 요소:

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

나중에 클래스를 제거하려면:

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

레거시 브라우저(className 속성)
Internet Explorer 9 이하와 같은 브라우저의 경우 , 요소의 className 속성을 사용하여 새 요소를 추가할 수 있습니다. class:

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

목록의 기존 클래스가 손상되지 않도록 새 클래스 이름 앞에 공백이 있는지 확인하세요.

참고: element.className 속성은 다음과 같을 수 있습니다. 최신 브라우저에서도 사용되지만 classList가 일반적으로 더 깔끔하고 효율적인 접근 방식입니다.

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