Modifier le style d'un noeud texte

[sarmane]

Je suis en train de réaliser une extension firefox 1.5 dans laquelle je repère des noeuds texte que je souhaite marqer en leur ajoutant une balise de type span et en leur affectant une couleur de fond spécifique.

La seule solution qui fonctionne et que j'ai trouvé est de récupérer le code innerHTML du noeud père, de repérer le texte qui m'intéresse et de l'encadrer par une balise span avec la couleur de fond que je souhaite.

Le problème est que ça casse la structure de l'arbre DOM, du coup ça crashe régulièrement et si je veux marquer d'autres noeuds fils du même père, ça les zappe.

J'ai essayé de modifier le style du noeud texte avec une ligne du genre
node.setAttribute("style","color:white;background-color:green;");
mais ça ne fait strictement rien à l'écran

J'ai essayé de modifier aussi le innerHTML de ce noeud texte mais ça ne fait rien non plus.

Est-il donc possible de modifier le style d'un noeud texte dynamiquement ?

[martin]

Sans passer par innerHTML, tu peux utiliser les fonctions DOM standardisés.

Supposons que tu as récupéré ton noeud texte, myTextNode.

Tu récupères le contenu texte:
var myText = myTextNode.data;

Tu veux l'imbriquer dans un élément span, donc on le crée :
var mySpan = document.createElement('span');

Tu styles ce span:
mySpan.setAttribute( laPropriete, laValeur);

Tu imbriques le contenu de myTextNode:
mySpan.appendChild(createTextNode(myText));

Et tu remplaces le noeud texte par le span:
myTextNode.parentNode.replaceChild(mySpan, myTextNode);

Evidemment le DOM est modifié, si tu veux pouvoir agir de nouveau sur cet élément, pour par exemple revenir à la situation d'origine, il te faudra surement attribuer au span une propriété pour le retrouver, l'id ou une classe par exemple.

J'ai tapé les commandes de mémoire, il te faut les vérifier ; des liens vers de la doc:
http://mozref.com/reference/objects/Node
http://developer.mozilla.org/en/docs/Ge ... _Reference

[sarmane]

merci beaucoup beaucoup

[Invité]

Sans passer par innerHTML, tu peux utiliser les fonctions DOM standardisés.

Supposons que tu as récupéré ton noeud texte, myTextNode.

Tu récupères le contenu texte:
var myText = myTextNode.data;

Tu veux l'imbriquer dans un élément span, donc on le crée :
var mySpan = document.createElement('span');

Tu styles ce span:
mySpan.setAttribute( laPropriete, laValeur);

Tu imbriques le contenu de myTextNode:
mySpan.appendChild(createTextNode(myText));

Et tu remplaces le noeud texte par le span:
myTextNode.parentNode.replaceChild(mySpan, myTextNode);

Evidemment le DOM est modifié, si tu veux pouvoir agir de nouveau sur cet élément, pour par exemple revenir à la situation d'origine, il te faudra surement attribuer au span une propriété pour le retrouver, l'id ou une classe par exemple.

J'ai tapé les commandes de mémoire, il te faut les vérifier ; des liens vers de la doc:
http://mozref.com/reference/objects/Node
http://developer.mozilla.org/en/docs/Ge ... _Reference

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7