Style hérité indésirable

Bonjour,

J'avais le code suivant qui marchait avant le passage en mode strict:
Code:

1 2 3 4 5 6 7 8 9 10 11 // CSS des lignes du tableau lines[0].style = 'initial'; lines[1].style = 'initial'; if (mainLinesCount & 1) { lines[0].style.backgroundColor = '#eee'; lines[1].style.backgroundColor = '#eee'; } else { lines[0].style.backgroundColor = '#8f8'; lines[1].style.backgroundColor = '#8f8'; }
En mode strict, les deux premières lignes sont refusées par IE11. J'ai donc transformé le code comme ceci:
Code:

1 2 3 4 5 6 7 8 if (mainLinesCount & 1) { lines[0].classList.add('oddBadgeLine'); lines[1].classList.add('oddBadgeLine'); } else { lines[0].classList.add('evenBadgeLine'); lines[1].classList.add('evenBadgeLine'); }
Avec le CSS suivant:
Code:

1 2 3 4 5 6 7 8 .oddBadgeLine { background-color:unset; /* cf initial, revert, unset, inherit */ background-color:#eee; } .evenBadgeLine { background-color:unset; /* cf initial, revert, unset, inherit */ background-color:#8f8; }
Maintenant les classes oddBadgeLine et evenBadgeLine s'affichent barrées dans les débogueurs de IE11 et Chrome. Dans le code css j'ai essayé de remplacer initial par revert ou unset, mais je n'arrive pas à faire prendre en compte ces classes. C'est toujours le style hérité qui est pris en compte.

REMARQUE IMPORTANTE: oddBadgeLine et evenBadgeLine ne concernent pas des lignes du tableau mais des paires de lignes.

:salut:

lines[0].style = 'initial'; n'a pas de sens ! C'est "backgroundColor" qui peut être "initial".

Comme je n'ai pas tous vos codes (HTML, CSS, JS) pour faire un test, voici un exemple :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<!--
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
				integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
				crossorigin="anonymous">
	-->
	<title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                th,
                td {
                        width: 10rem;
                        border: 1pt dotted grey;
                        padding: 0.3rem;
                        line-height: 1.6rem;
                }
                #tableTest > tbody > tr {
                        background-color: yellow;
                }
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const lines = k$all( "#tableTest > tbody > tr" );
                        
                        for ( const [ i, line ] of lines.entries() ){
                                if ( i % 2 === 0 ){
                                        lines[i].style.backgroundColor = "orange";
                                } else {
                                        lines[i].style.backgroundColor = "blue";
                                }
                        }
                        
                        setTimeout( () => {
                                lines[0].style.backgroundColor = "initial";
                                lines[1].style.backgroundColor = "initial";
                        }, 3000 ); //3s
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<table id="tableTest">
			<thead>
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
					<th>4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>10</td>
					<td>20</td>
					<td>30</td>
					<td>40</td>
				</tr>
				<tr>
					<td>11</td>
					<td>21</td>
					<td>31</td>
					<td>41</td>
				</tr>
				<tr>
					<td>12</td>
					<td>22</td>
					<td>32</td>
					<td>42</td>
				</tr>
				<tr>
					<td>13</td>
					<td>23</td>
					<td>33</td>
					<td>43</td>
				</tr>
				<tr>
					<td>14</td>
					<td>24</td>
					<td>34</td>
					<td>44</td>
				</tr>
				<tr>
					<td>15</td>
					<td>25</td>
					<td>35</td>
					<td>45</td>
				</tr>
			</tbody>
		</table>
 
 
	</main>
</body>
</html>

Merci