如何使用 jQuery 在 SVG 元素中新增或刪除類別？

jQuery SVG：克服類別操作挑戰

無法使用 jQuery 從 SVG 元素新增或移除類別？解決此問題需要更深入了解底層機制。

根本原因：jQuery 對SVG 的限制

在3 之前的jQuery 版本中，操作SVG 時存在限制使用.addClass() 或.removeClass() 方法的元素。這些方法是為 HTML 元素設計的，其功能並未完全擴展到 SVG。

替代解決方案

要解決這個問題，有幾個可行的選項：

• 升級到jQuery 3： 此版本解決了根本問題，啟用SVG 元素的無縫類別操作。
• 使用 Vanilla JavaScript： 現代瀏覽器支援 element.classList 屬性，可用於新增或刪除類別。

• 透過 jQuery 利用 .attr()： 雖然不總是理想，但您可以使用.attr() 方法來操作 SVG 類別屬性。

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

  登入後複製

• 不帶 jQuery 的純 JavaScript： 使用 element.setAttribute() 方法是另一個選擇。

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

  登入後複製

透過採用這些解決方案，您可以有效地添加或從 SVG 元素中刪除類，從而實現所需的動態樣式和互動。

以上是如何使用 jQuery 在 SVG 元素中新增或刪除類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！