Pourquoi ne puis-je pas ajouter de classes aux éléments SVG avec jQuery ?

jQuery SVG : Dépannage de l'incapacité d'ajouter une classe

Lorsque vous travaillez avec jQuery SVG, vous pouvez rencontrer des problèmes lors de l'ajout ou de la suppression de classes d'objets SVG. Dans cet article, nous étudierons les causes et proposerons des solutions.

Le problème :

Considérez le code suivant :

<rect>

Malgré être capable de déclencher une alerte en cliquant sur l'objet, l'ajout de la classe "cliqué" échoue.

Le Solution :

Avant jQuery 3, l'ajout de classes aux éléments SVG était problématique. Cependant, ce problème a été résolu dans jQuery 3. De plus, les navigateurs modernes prennent en charge la méthode JavaScript vanille classList.add('newclass') pour les éléments SVG.

Approche jQuery alternative :

Si vous préférez vous en tenir à jQuery, vous pouvez manipuler l'attribut de classe directement en utilisant attr() :

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

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

Approche JavaScript Vanilla :

Pour éviter la dépendance à jQuery, utilisez le code JavaScript Vanilla suivant :

var element = document.getElementById("item");

// Add "newclass"
element.setAttribute("class", "oldclass newclass");

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!