JavaScript를 사용하여 HTML 요소에서 클래스를 어떻게 추가하거나 제거할 수 있습니까?

JavaScript를 사용하여 요소에 클래스 추가

HTML 요소로 작업할 때 JavaScript를 사용하여 클래스를 동적으로 추가하거나 제거해야 하는 경우가 종종 있습니다. . 예를 들어 다음 HTML을 포함하는 요소가 있다고 가정해 보겠습니다.

<div class="someclass">
    <img ...>

그리고 위의 div 요소에 다른 클래스를 추가하는 JavaScript 함수를 생성하려고 합니다.

최신 브라우저

Element.classList 속성을 지원하는 최신 브라우저만 대상으로 하는 경우 솔루션은 간단합니다. 간단히 classList.add() 메서드를 사용하여 요소에 새 클래스를 추가합니다.

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

클래스를 제거하려면 classList.remove() 메서드를 사용합니다.

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

Internet Explorer 9 이하

Internet Explorer 9 이하와 같은 이전 브라우저의 경우 classList 속성을 지원하지 않는 경우 className 속성을 사용할 수 있습니다. 먼저, 쉽게 검색할 수 있도록 요소에 ID를 할당합니다.

<div>

그런 다음 새 클래스 이름을 기존 클래스 이름과 연결하고 클래스 사이에 공백을 추가합니다.

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

클래스 목록에 있는 기존 클래스와의 충돌을 피하기 위해 새 클래스 이름 앞에 공백을 포함해야 합니다.

이러한 접근 방식을 따르면 다음과 같은 작업을 수행할 수 있습니다. JavaScript를 사용하여 HTML 요소에서 클래스를 동적으로 추가하거나 제거하여 웹 페이지 스타일에 대한 유연성과 제어 기능을 제공합니다.

위 내용은 JavaScript를 사용하여 HTML 요소에서 클래스를 어떻게 추가하거나 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!