Remplacement d'un élément par son innerHTML

Version imprimable

Voir 40 message(s) de cette discussion en une page

01/03/2017, 16h54
patricktoulon

re

mais j'ai compris pourquoi
je pense que c'est l'auto completion

quand le texte tombe sur deux balise croisé et que tu fait ton insert dans la balise innerHTML une balise est forcement pas fermée
donc l'autocompletion la rajoute et comme a la fin il reste plus que ca forcement tu peut tourner virer 14 heures il la remettra toujours
tandis que ma methode boucle sur les font de l'innerHTML mais fait le replace dans la variable str et donc il n'y a pas d'autocompletion

j'ai fait le test
j'ai mis toute la boucle primaire dans une boucle bouclant 3 fois suffisant pour voir le phénomène
arriver donc a ce "<font>exemple</font> <font>de</font>" ton replace fonctionne et me donne bon dans un alert

mais la ligne suivant un autre alert me le redonne et cela les 3 fois d'affilé insertbefore l'enlève le innerHTML le remets
rien a faire

comme je le soupconne il n'y a pas 2 balise a la fin mais 3 1 font,1 textnode(lespace),la 2d font
et comme ce textnode est finalement vide on ne vois pas schématiquement le phénomène mais c'est bien ca il rajoute la balise parce que il ne peut pas croiser avec une autre mais si la balise est vide c'est quand même un fragment qu'il prends en compte
a la fin c'est comme si tu lui demandais de faire

<font> exemple</font> frag<font>de</font> mentdonc il décroise et te remet font1 espace font2 tu peut tourner virer j'ai fait l’expérience a chaque fois il le remet il faudrait mettre des if sur cette condition mais ca deviendrait très complexe en tout cas pour moi

au mieux on arrive avec ta methode a
<font>exemple</font>espace de
après bien évidement il ne peut plus rien replacer car pour un replace il faut qu'il y est au moins deux font
conclusion ta methode fonctionne a hauteur des children direct de balisefont au delà children0 children1 etc... ne peuvent plus être déplace sinon ob_3 qui est le parent et qui devrait etre supprimé en fin de while forcement comme c'est le balisefont walouh walouh !!!!

Je n'ai pas encore regardé le dernier message.
Je réponds déjà ceci :
J'ai regardé très rapidement :
Le problème serait au niveau des attributs valant "" qui peuvent continuer à exister selon le navigateur, ce qui joue sur le test "hasAttributes".
Sur Internet Explorer, si "class" ou "style" valent vide, le "innerHTML" ne les affiche pas.
Sur Firefox, c'est affiché.
Code:

1 2 3 4 5 6 7 <div id="test" class="" style=""></div> <script> var ob_=document.getElementById("test"); console.log(ob_.outerHTML+" class : "+ob_.hasAttribute("class")+" style : "+ob_.hasAttribute("style")); //Internet Eplorer : <div id="test"></div> class : true style : false //Firefox : <div id="test" class="" style=""></div> class : true style : true </script>
Ici :
Code:

1 2 colhtml[i].style.textShadow = ""; colhtml[i].className = "";
Plutôt :
Code:

1 2 colhtml[i].removeAttribute("style"); //en supposant que "textShadow" est la seule propriété colhtml[i].removeAttribute("class");
Ainsi le test sur "hasAttributes" passe et le traitement semble fait jusqu'au bout, mais il faudra bien vérifier.

01/03/2017, 18h16
patricktoulon

re

re
ok mais perso je traville en hta ou html ou activX utilisant la librairie IE ou IEold
donc c'est pas un soucis pour moi
parcontre ton

Code:

colhtml[i].removeAttribute("style");

ben non ca remet tout en question justement car il peut y avoir un style="backcolor....;" que je garde bien évidement
c'est pour cela que j’enlève juste et précisément le textshadow
01/03/2017, 18h23
patricktoulon

re

re
fait le teste simple avec 2 ou 3 fonts simple séparés par un espace avec ton while2 tu vera je viens de le faire et c'est bien ca
l'espace est un fragment et considérer comme un enfant mais pour le replace ayant aucun identifiant ca plante ton system de font a font
pour palier a ce probleme il faudrais faire un previus sibling .insertfefore fragment pour tout les espace ainsi pendant le transfert de font a font ils serait déjà dans les fonts
je vois que ca

Si je prends le code avec ma version, l'exemple donné et que je fais la modification pour supprimer réellement les attributs en ajoutant un test pour ne pas supprimer les "style" dont il reste encore des propriétés, j'obtiens ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <div id="test"><font size="7"><font class="shado" style="text-shadow: 0px 0px 10px #ff0000;">EXE<font color="#00ffff">M</font>P<font color="#ff8080">L</font>E</font> <font class="shado" style="text-shadow: 0px 0px 10px #00ffff;">DE</font> <font class="shado" style="text-shadow: 0px 0px 10px #00ff00;">TEXTE</font></font></div> <script> function shadowcolor(coul, MOD) { if (true) { var ob_=document.getElementById("test"); var selection=document.createRange(); selection.selectNodeContents(ob_); var selectedText = selection.extractContents(); var balisefont = document.createElement("FONT"); balisefont.appendChild(selectedText); var colhtml = balisefont.getElementsByTagName("FONT"); if (colhtml.length > 0) { for (var i = 0; i < colhtml.length; i++) { if (colhtml[i].className == "shado") { colhtml[i].style.textShadow = ""; if(colhtml[i].style.length===0) //ou colhtml[i].style.cssText==="" (il faudra vérifier si c'est bien la bonne méthode) { colhtml[i].removeAttribute("style"); } colhtml[i].removeAttribute("class"); } } } var ob_, ob_2, ob_3; var colhtml = balisefont.getElementsByTagName("font"); var i = colhtml.length; while (--i >= 0) { ob_ = colhtml[i]; if (ob_.innerHTML === "") { ob_.parentNode.removeChild(ob_); } else if (!ob_.hasAttributes()) { ob_3 = ob_.parentNode; while (ob_2 = ob_.firstChild) { ob_3.insertBefore(ob_2, ob_); } ob_3.removeChild(ob_); } } console.log(balisefont.innerHTML); //<font size="7">EXE<font color="#00ffff">M</font>P<font color="#ff8080">L</font>E DE TEXTE</font> if (MOD == true) { balisefont.className = "shado"; balisefont.style.textShadow = "0px 0px 10px " + coul; } selection.insertNode(balisefont); if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") { balisefont.className = "shado"; balisefont.style.textShadow = "none"; } } // FIN DE IF selectionne_text } //fin de fonction shado shadowcolor("red", true); </script>
J'ai adapté le début de la fonction pour tester.

Le résultat est bien celui souhaité, il me semble, non ?

Citation:

l'espace est un fragment et considérer comme un enfant mais pour le replace ayant aucun identifiant ca plante ton system de font a font

Je ne sais pas, je n'ai pas remarqué ce genre de choses.
Je n'ai pas assez de temps libre pour tester trop à fond.
Il faut me donner des exemples que je peux tester directement.
En tout cas, il me semble que dans le code ci-dessus, tout se passe bien.

Citation:

ok mais perso je traville en hta ou html ou activX utilisant la librairie IE ou IEold
donc c'est pas un soucis pour moi

Justement, c'est sur Internet Explorer que le souci est :
Le "innerHTML" ne contient pas les attributs vides or, le "hasAttributes" dit qu'il y a encore des attributs, d'où le fait que le noeud "<font>de</font>" n'était pas traité si sa vraie valeur est en réalité "<font class="">de</font>". D'où la correction que je propose et qui paraît fonctionner.

je vais tester ca
moi j'ai tester ceci et on vois gros comme une maison la méprise du DOM

je selectionne toujour pareil "exemple de"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function shadowcolor(coul, MOD) {
var texte=""
if (selectionne_text()) {
        var selection = selectionne_text();
        var selectedText = selection.extractContents();
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
var elem= balisefont.getElementsByTagName("*")
for(var i=0;i<elem.length;i++){
texte=texte +"   new element typenode= "+ elem[i].nodeType +"  --valeur   :  " +elem[i].innerText;}
alert(texte);
}
}

j'ai comme résultat que des nodetype 1 alors que je devrait en avoir qui est a 3

en effet c'est exact !!

re
bon ben selon ton raisonnement je n'enleve pas l'attribut style mais je le teste en meme temps que hasattributes() et ca match

c'est assez etonnant quand meme que l'on voit pas le( style="") et que le dom lui le vois

bon ben ca marche comme ca
cela me permet de garder les backcolor
( voir ligne 30)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function shadowcolor(coul, MOD) {    if (selectionne_text()) {


        var selection = selectionne_text();


        var selectedText = selection.extractContents();


        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);


        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].className = "";
                }
            }
        }
        var ob_, ob_2, ob_3;
        var colhtml = balisefont.getElementsByTagName("font");
        var i = colhtml.length;
        while (--i >= 0) {
            ob_ = colhtml[i];
            if (ob_.innerHTML === "") {
                ob_.parentNode.removeChild(ob_);
            } else if (!ob_.hasAttributes() || ob_.getAttribute("style") == "") {
                ob_3 = ob_.parentNode;
                while (ob_2 = ob_.firstChild) {
                    ob_3.insertBefore(ob_2, ob_);
                }
                ob_3.removeChild(ob_);
            }
        }
        alert(balisefont.innerHTML);
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
    } // FIN DE   IF selectionne_text
    alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
} //fin de fonction shado

et M!!!!... pas a tout les coups
bon ben je remove l'attribut en amont si il n'y a pas de background color
puisque apres tout le truc est simple
soit il y a pas d'atribut on vire
soit il y a attribut on garde
les attributs sont
face,size,color pour les attr html
apres il y a l'attribut style
dedans il peut y avoir textshadow et/ou background-color et c'est tout
donc a partir du moment ou je vire le texte shadow (textShadow="") et que le getattribute ("style")me donne"" il n'y a donc pas de background alors on peut virer l'attribut "style"
et voila c'est terminé bouclé yen a marre on passe au problème suivant ;)

voila la version avec ta methode qui marche a tous les coups

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function shadowcolor(coul, MOD) {    if (selectionne_text()) {
 
 
        var selection = selectionne_text();
 
 
        var selectedText = selection.extractContents();
 
 
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
 
 
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].removeAttribute("class");
                }
                if (colhtml[i].style.backgroundColor == "") {
                    colhtml[i].removeAttribute("style");
                }
            }
        }
        var ob_, ob_2, ob_3;
        var colhtml = balisefont.getElementsByTagName("font");
        var i = colhtml.length;
        while (--i >= 0) {
            ob_ = colhtml[i];
            if (ob_.innerHTML === "") {
                ob_.parentNode.removeChild(ob_);
            } else if (!ob_.hasAttributes()) {
                ob_3 = ob_.parentNode;
                while (ob_2 = ob_.firstChild) {
                    ob_3.insertBefore(ob_2, ob_);
                }
                ob_3.removeChild(ob_);
            }
        }
        alert(balisefont.innerHTML);
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
    } // FIN DE   IF selectionne_text
    alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
} //fin de fonction shado

merci loralina
il faudra que je m'en souvienne pour l'attribut fantome

Citation:

Envoyé par Beginner.

Est-ce que l'objectif c'est de supprimer les balises <font> n'ayant aucun attribut ou bien c'est de supprimer la couleur ?

Bon ben j'ai essayé de trouver moi-même une réponse à ma question et je comprend avec le titre du fil et les codes postés que tu cherches à supprimer les balises <font> n'ayant aucun attribut...

Par rapport au titre du fil "Remplacement d'un element par son innerHTML" une possibilité simple serait de faire pour un objet html X ceci : X.outerHTML = X.innerHTML;Si je reprend le bout de code de Loralina en le modifiant cela donne par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 var balisefont = document.getElementById("test"); var colhtml = balisefont.getElementsByTagName("font"); var i = colhtml.length; while (--i >= 0) { ob_ = colhtml[i]; if (!ob_.hasAttributes()) { ob_.outerHTML = ob_.innerHTML; } }
Tu peux faire des tests ici : http://jsbin.com/negatedufu/edit?html,output

Autre remarque :

Citation:

Envoyé par patricktoulon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function shadowcolor(coul, MOD) {    if (selectionne_text()) {
 
 
        var selection = selectionne_text();
 
 
        var selectedText = selection.extractContents();
 
 
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
 
 
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].removeAttribute("class");
                }
                if (colhtml[i].style.backgroundColor == "") {
                    colhtml[i].removeAttribute("style");
                }
            }
        }
        var ob_, ob_2, ob_3;
        var colhtml = balisefont.getElementsByTagName("font");
        var i = colhtml.length;
        while (--i >= 0) {
            ob_ = colhtml[i];
            if (ob_.innerHTML === "") {
                ob_.parentNode.removeChild(ob_);
            } else if (!ob_.hasAttributes()) {
                ob_3 = ob_.parentNode;
                while (ob_2 = ob_.firstChild) {
                    ob_3.insertBefore(ob_2, ob_);
                }
                ob_3.removeChild(ob_);
            }
        }
        alert(balisefont.innerHTML);
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
    } // FIN DE   IF selectionne_text
    alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
} //fin de fonction shado

merci loralina
il faudra que je m'en souvienne pour l'attribut fantome

Je vois que la suppression des attributs vous a posé quelque soucis mais j'ai une une autre question est-ce que les balises que tu cherches à supprimer sont les seules à l'origine à avoir la class "shado" ?

Si oui alors finalement cela revient à vouloir supprimer toutes les balises <font> ayant la class "shado" alors pourquoi pas les supprimer directement au lieu de supprimer le style (textShadow) + la class "shado" puis ensuite la balise <font> ?

Cela réduirait ton code...

01/03/2017, 23h40
patricktoulon

re
et non beguiner

je ne peux pas supprimer le l'attribut"style"
car il peut y avoir

Code:

<font size =5 color= red style="text-shadow:0,0,10px;background-color:#xxxxxx;">toto</font>

et je ne veut traiter que le shadow d
onc dans ce cas précis on garde la balise
parce qu'elle a l'attribut size,color,et le background-color
comme je l'ai dis plus haut il peut y a voir toutes , une d'entre elle , quelques unes: de ces attributs et style
donc hors de question de supprimer le font tant que tout n'est pas testé

conclusion dans mon dernier model sous les deux variante(loralina/la mienne en string) on :
1. vire la class -----------"removeAttribut("class")"
2. vire le shadow --------textShadow=""
3. teste si getAttribut("style") me rapporte quelque chose
4. si raporte rien alors ya pas de background
5. on peut donc supprimer l'attribut "style"
6. nous voila avec des font nettoyés du style sauf ceux qu'on un background
7. maintenant test si il y a attribut (size ou color (if!hasAttributes())
8. si oui on garde comme tel sinon on garde que le innerhtml pour la version string insertbefore dans le parent pour la version loralina
9. suppression des balises vide après insertbefore
voila
c'est moins simple qu'il n'y parait mais on y est arrivé
en tout cas les deux versions fonctionnent nickel l'une élégante l'autre a la bucheronne :mouarf:
02/03/2017, 10h03
Loralina

Bonjour,

Citation:

Envoyé par Beginner.

une possibilité simple serait de faire pour un objet html X ceci : X.outerHTML = X.innerHTML;

Oui, cela fonctionne aussi. :)
Je préfère tout de même une version sur les nœuds, pouvant être plus rapide en traitement (cela peut dépendre de l'arborescence), et surtout qui conserve les nœuds d'origine (certains nœuds spécifiques pourraient être référencés ailleurs dans le programme, avoir des événements...).
Sinon, dans mon code, concernant la suppression des nœuds vides, une optimisation serait sans doute de remplacer le test "if(ob_.innerHTML==="")" par "if(ob_.firstChild===null)".

Bonjour
heu... oui bieguiner c'est ce que je fait avec ma version string outer/inner HTML

beaucoup d'entre vous m'ont dis que c’était pas vraiment propre comme travail alors que ca fonctionne parfaitement bien
c'est pour ca que je me suis lancé dans le dom sinon tu pense bien
ca fait rien j'ai une une belle démonstration de loralina sur le insertbefore

@loralina dis moi une chose le insertbefore insert la balise ou son innerHTML????

la version string

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
function selectionne_text() {  
  return window.getSelection().getRangeAt(0);
}
 
 
 
 
 
 
function shadowcolorstring(coul, MOD) {
    if (selectionne_text()) {
        var selection = selectionne_text();
        var selectedText = selection.extractContents();
        var BF = document.createElement("FONT");
        BF.appendChild(selectedText);
        var str = BF.innerHTML;
        var colhtml = BF.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].removeAttribute("class");
                }
            }
        }
 
 
        var str = BF.innerHTML;
        for (var i = 0; i < colhtml.length; i++) {
            if (colhtml[i].outerHTML.substring(0, 6) == "<font>") {
                str = str.replace(colhtml[i].outerHTML, colhtml[i].innerHTML);
            }
        }
        alert(str);
        BF.innerHTML = str;
        if (MOD == true) {
            BF.className = "shado";
            BF.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(BF);
        if (BF.parentElement.className == "shado" && MOD == false && BF.parentElement.tagName != "P") {
            BF.className = "shado";
            BF.style.textShadow = "none";
        }
    }
}

02/03/2017, 20h17
Beginner.

Salut,

Citation:

Envoyé par Loralina

Bonjour,

Oui, cela fonctionne aussi. :)
Je préfère tout de même une version sur les nœuds, pouvant être plus rapide en traitement (cela peut dépendre de l'arborescence), et surtout qui conserve les nœuds d'origine (certains nœuds spécifiques pourraient être référencés ailleurs dans le programme, avoir des événements...).

Ah je ne savais pas que c'était moins rapide, je croyais même le contraire... Sinon oui en générale on lit qu'il est préférable d'utiliser les fonctions de manipulations du DOM.

Citation:

Envoyé par patricktoulon

et non beguiner

je ne peux pas supprimer le l'attribut"style"
car il peut y avoir

Code:

<font size =5 color= red style="text-shadow:0,0,10px;background-color:#xxxxxx;">toto</font>

et je ne veut traiter que le shadow d
onc dans ce cas précis on garde la balise
parce qu'elle a l'attribut size,color,et le background-color
comme je l'ai dis plus haut il peut y a voir toutes , une d'entre elle , quelques unes: de ces attributs et style
donc hors de question de supprimer le font tant que tout n'est pas testé

Ok mais il manque la class "shado" dans ton exemple, non ? Dans la balise <font> as-tu le shadow et le reste (couleur, size...) mélangé ensemble ? Est-ce que ce mélange se fait automatiquement ? Pour le shadow tu utilises ta fonction shadowcolor(coul, MOD) et pour le reste (couleur, size...) tu utilises la fonction execCommand, c'est ça ? Et c'est peut-être cette fonction qui fait le mélange ?

---> Sinon mon idée c'était d'utiliser par exemple une balise <span> avec la class "shado" alors tu pourrais tous les repérer facilement avec l'instruction document.getElementsByClassName() et alors les supprimer directement...
02/03/2017, 20h27
patricktoulon

re

Bonsoir
oui beguinner pour enlever ou mettre un shadow text c'est la même fonction avec MOD et coul

pour le reste (color,background,size)c'est bien execCommand qui fait très bien le boulot quasi ment c'est pas parfait non plus
a l'inverse de moi qui est soucieux du nettoyage de code execCommand ne va pas jusque au bout elle me laisse quelque fois des fantômes

et oui la méthode string contrairement a ce que je croyais moi aussi vu le nombre d'opération largement inferieur est quand même plus lourde en terme d'utilisation de mémoire
par contre si on met un timer la version string est plus rapide de pas grand chose certes mais tout de même

il faut dire aussi c'est que si execCommand ne fait un nettoyage parfait c'est peu être parce qu'il n'est pas prévu une manipulation girouette( refaire et redéfaire a outrance )comme je le conçois avec ma fonction shadow
02/03/2017, 20h41
Beginner.

Oui alors c'est peut-être cette fonction qui fait le mélange ? Parce que si tu veux avec ta fonction shadowcolor(coul, MOD) on devrait avoir un truc de ce genre :

<font class="shado" style="text-shadow:0,0,10px">toto</font>

Sans rien d'autres, non ?
Mais c'est peut-être la fonction execCommand qui ajoute dans la même balise <font> le reste (size,color...) ?

- Sinon elle sert à quoi la class "shado" ?

Citation:

Envoyé par patricktoulon

@loralina dis moi une chose le insertbefore insert la balise ou son innerHTML????

Cette fonction insert la balise, le outerHTML si tu préfères... Tu peux tester ici : http://jsbin.com/qamicofote/edit?html,console,output
02/03/2017, 21h08
patricktoulon

1 pièce(s) jointe(s)

re

je crois que tu ne m'a pas compris quand j'utilisais le mot outrance

en fait la fonction shadow enle ve ou met le shadow et c'est tout
par contre quand elle le met ou l'enlève il y a des chance pour qu'il y ai d'autre attributs entre temps qui on été ajoutés
et ca elle ne dois pas l'enlever

la ou est la complexité c'est que il est prévu de faire et redéfaire sans toucher au reste des attributs
sinon oui si il y avais que le shadow ce serait facile on prend le innertext et on le met en tant que innerHTMLdans la nouvelle font créée
et nos deux versions font le job
Pièce jointe 250229
02/03/2017, 21h24
Beginner.

Je pense que je t'ai compris et j'ai vérifié : c'est bien la fonction execCommand qui fait le mélange et la raison je pense c'est que tu utilises la balises <font> pour le shadow et tout le reste aussi or mon idée justement ce serait d'utiliser par exemple une balise <span> avec la class "shado", cette balise serait reservé au shadow et pour le reste tu continues à utiliser la balise <font>...

Et il serait facile de les repérer avec l'instruction document.getElementsByClassName() et alors les supprimer directement...

Je parle de supprimer uniquement les balises <span> ayant la class "shado" et non les balises <font> ainsi tu ne touches pas au reste des attributs...

----
Deux questions/remarques :

- Sommes-nous d’accord que pour supprimer le shadow d'un texte donné tu es obligé de sélectionné tout ce texte et non une partie ? Par exemple si tu as trois mots et que tu leurs mets un shadow alors tu ne peux pas par exemple juste suprimer le shadow du deuxième mot sans toucher aux deux autres mots, est-ce bien ce qui se passe ?

- elle sert à quoi la class "shado" ?
02/03/2017, 22h04
patricktoulon

2 pièce(s) jointe(s)

re

et oui je m'en doutais et non tu n'a pas compris ma démarche
je veut autant que j'ai de peau sous mes doigts pouvoir coisir un mot ou plusieur ou une partie d'un et une partie du suivant et pouvoir lui changer l'ombre autant que j'en aie envie
regarde bien ce que je fait avec le texte regarde bien comme je croise a outrance les selection et mots et demie mots

Pièce jointe 250234

et avec les contrainte de "color,size,,face bold ,italic,underline,backgroundColor voila perfection
Pièce jointe 250243
02/03/2017, 22h29
Beginner.

Citation:

Envoyé par patricktoulon

et oui je m'en doutais et non tu n'a pas compris ma démarche
je veut autant que j'ai de peau sous mes doigts pouvoir coisir un mot ou plusieur ou une partie d'un et une partie du suivant et pouvoir lui changer l'ombre autant que j'en aie envie
regarde bien ce que je fait avec le texte regarde bien comme je croise a outrance les selection et mots et demie mots

Oui je pense avoir compris cela : j'ai bien compris que tu peux comme tu veux ajouter un shadow de n'importe quelle couleur sur un ou plusieurs mots...

Mais moi je te parle de la suppression du shadow alors peux-tu faire ceci :

- tu as trois mots et tu leurs mets un shadow de couleur verte...
- Peux-tu par exemple juste suprimer le shadow du deuxième mot sans toucher aux deux autres mots ? C'est-à-dire le premier et le deuxième mot reste avec un shadow de couleur verte...

------------

Pour le reste j’essaierais de mettre en œuvre ce dont je te parle, l'exemple sera peut-être plus parlant...

Voir 40 message(s) de cette discussion en une page