textDecoration en JavaScript

**sonic10150** · 10/05/2021, 22h56

Bonjour
voici mon code simplifié.
id nb_chapitre est bien souligné grâce à style.textDecoration="underline" mais nb_ligne mis à style.textDecoration="none" laisse le text souligné malgré que en mode débug style.textDecoration est bien égale à "none"
testé sous win10/chrome.

J'ai testé en passant par du CSS c'est pareil même en rajoutant !important

je ne vois pas ou je me suis trompé.
En vous remerciant pour votre aide

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>  
     <script>
   
      function test() {
    
        m="chapitre doit etre souligné : ok";
        m1="ligne ne doit pas etre souligné: ko";
 
 
        var div_list = document.getElementById('list1'); // récupération de la liste
        var div_chapitre = document.createElement("div"); // on cré un nouveau noeud item de liste
        div_chapitre.setAttribute("id","nb_chapitre");
        var text_chapitre = document.createTextNode(m); // on cré un noeud texte
        div_chapitre.appendChild(text_chapitre); // on attache le noeud texte au noeud item de liste
        div_list.appendChild(div_chapitre); 
        var div_chapitre1 = document.getElementById('nb_chapitre');
        var div_lignes = document.createElement("div"); 
        div_lignes.setAttribute("id","nb_lignes");
        div_chapitre1.appendChild(div_lignes);
        document.getElementById('nb_chapitre').style.textDecoration="underline";
 
        // plus tard dans une autre fonction
        var div_lignes = document.getElementById('nb_lignes'); // récupération de la liste
        var div_ligne = document.createElement("div"); // on cré un nouveau noeud item de liste
        div_ligne.setAttribute("id","nb_ligne");
        var oText = document.createTextNode(m1); // on cré un noeud texte
 
        div_ligne.appendChild(oText); 
        div_lignes.appendChild(div_ligne); // on attache le noeud texte au noeud item de liste
        document.getElementById('nb_ligne').style.textDecoration="none";
    } 
  
  </script>
    <form>
      <input type=checkbox   onClick='test()'>bouton<br>
      <div id='list1'>vide</div>
    </form>
  </body>
</html>

**SpaceFrog** · 11/05/2021, 08h09

essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.removeAttribute("textDecoration",false)

??

**sonic10150** · 11/05/2021, 08h49

Je viens de tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  ....
        d div_ligne.appendChild(oText); 
        div_ligne.removeAttribute("textDecoration",false);
 
        div_lignes.appendChild(div_ligne); // on attache le noeud texte au noeud item de liste
        document.getElementById('nb_ligne').removeAttribute("textDecoration",false);
        document.getElementById('nb_lignes').removeAttribute("textDecoration",false);
        document.getElementById('nb_chapitre').removeAttribute("textDecoration",false);
        document.getElementById('list1').removeAttribute("textDecoration",false);
....

et la div 'nb_ligne' reste toujours souligné.
Il y a un truc qui ne va pas . En retirant tous les textDecoration des div, les 2 lignes restent soulignés.
Avez vous d'autres idées?

**sonic10150** · 11/05/2021, 09h38

Envoyé par Doksuri

document.getElementById('nb_ligne').style.textDecoration = 'none !important'; ?

c'est la meme chose que la ligne 35 du 1er post

Code : Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('nb_ligne').style.textDecoration="none";

Je viens ~~quand~~ de tester ~~avec de simple guillement .~~ Toujours pareil.

**NoSmoking** · 11/05/2021, 09h59

Bonjour,
tu ne peux pas procéder de cette façon, il est impossible de désactiver la décoration des éléments enfants.

Ressources :

Dans ton cas il te faut « tronçonner » ton code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="conteneur">
  <p class="text-underline">Blabla sera souligné....</p>
  <div>
    <p>Ne sera pas souligné.</p>
  </div>
</div>

**sonic10150** · 11/05/2021, 11h30

Un Grand merci NoSmoking
ca fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
...
  m="chapitre doit etre souligné : ok";
        m1="ligne ne doit pas etre souligné: ko";
 
        var div_list = document.getElementById('list1'); // récupération de la liste
        var div_chapitre = document.createElement("div"); // on cré un nouveau noeud item de liste
        div_chapitre.setAttribute("id","nb_chapitre");
         var p_chapitre = document.createElement("p");
         p_chapitre.setAttribute("id","titre");
        var text_chapitre = document.createTextNode(m); // on cré un noeud texte
        p_chapitre.appendChild(text_chapitre); // on attache le noeud texte au noeud item de liste
        div_chapitre.appendChild(p_chapitre); 
        //var div_chapitre1 = document.getElementById('nb_chapitre');
        var div_lignes = document.createElement("div"); 
        div_lignes.setAttribute("id","nb_lignes");
 
        var div_ligne = document.createElement("div"); 
        div_ligne.setAttribute("id","nb_ligne");
 
 
        var p_ligne = document.createElement("p"); // on cré un nouveau noeud item de liste
 
        var oText = document.createTextNode(m1); // on cré un noeud texte
        p_ligne.appendChild(oText); 
        div_ligne.appendChild(p_ligne);
        div_lignes.appendChild(div_ligne);
        div_chapitre.appendChild(div_lignes);
        div_list.appendChild(div_chapitre);
  document.getElementById('titre').style.textDecoration="underline";
...

textDecoration en JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager