>웹 프론트엔드 >JS 튜토리얼 >jQuery 또는 Vanilla JavaScript를 사용하여 SVG 요소 클래스를 효과적으로 관리하려면 어떻게 해야 합니까?

jQuery 또는 Vanilla JavaScript를 사용하여 SVG 요소 클래스를 효과적으로 관리하려면 어떻게 해야 합니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-20 15:44:10782검색

How Can I Effectively Manage SVG Element Classes with jQuery or Vanilla JavaScript?

jQuery SVG 요소 클래스 조작 문제 해결

jQuery SVG로 작업할 때 객체에 클래스를 추가하거나 제거하는 것이 어려울 수 있습니다. 이 문제를 해결하려면:

  • 최신 버전의 수정 사항을 위해 jQuery 3 이상으로 업그레이드하세요.

  • 바닐라 JavaScript의 경우 요소를 사용하세요. 현대에서 클래스를 추가하려면 .classList.add('newclass') 를, 클래스를 제거하려면 element.classList.remove('newclass') 를 사용하세요. 브라우저.

또는 .attr()을 사용하여 SVG 요소와 직접 작동합니다.

<br>// 클래스 추가<br>$("#item").attr("클래스", "이전클래스 newclass");</p>
<p>// 클래스 제거<br>$("#item").attr("class", "oldclass");<br>

jQuery가 종속성이 아닌 경우:

<br>// 추가 class<br>document.getElementById("item").setAttribute("class", "oldclass newclass");</p>
<p>// 클래스 제거<br>document.getElementById("item").setAttribute(" class", "oldclass");<br>

위 내용은 jQuery 또는 Vanilla JavaScript를 사용하여 SVG 요소 클래스를 효과적으로 관리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.