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

jQuery SVG: 클래스 추가 및 제거

jQuery SVG로 대화형 요소를 생성하더라도 사용자가 클래스를 조작하려고 할 때 어려움을 겪는 경우가 있습니다. 발생하는 문제는 SVG 개체에서 클래스를 추가하거나 제거할 수 없다는 것입니다.

문제:

jQuery 선택기와 이벤트 핸들러는 SVG 요소와 원활하게 작동하여 다음과 같은 작업을 허용합니다. 클릭에 대한 경고를 표시합니다. 그러나 동일한 요소에 클래스를 추가하기 위해 jQuery의 addClass 메소드를 활용하려는 시도는 성공하지 못했습니다.

해결책:

핵심 문제는 jQuery가 해당 요소에 대한 클래스를 직접 수정할 수 없다는 것입니다. 버전 3 이전의 SVG 요소. 이러한 제한으로 인해 추가 및 제거를 위한 대체 접근 방식이 필요합니다. 클래스:

jQuery 종속 접근 방식:

addClass 및 RemoveClass를 사용하는 대신 jQuery의 attr() 메서드를 활용하여 클래스 속성을 조작합니다.

// Add a new class
$("#item").attr("class", "oldclass newclass");

// Remove a class
$("#item").attr("class", "oldclass");

순수 JavaScript 접근 방식:

jQuery에 의존하지 않으려면 JavaScript의 setAttribute 메소드를 사용하여 요소의 클래스 속성을 직접 조작할 수 있습니다.

// Add a new class
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

// Remove a class
element.setAttribute("class", "oldclass");

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