Style hérité indésirable

**moimp** · 29/10/2017, 20h03

Bonjour,

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

Code javascript :

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

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 javascript :

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

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 css :

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

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.

**danielhagnoul** · 30/10/2017, 01h43

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 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
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>

**moimp** · 30/10/2017, 15h46

Merci

Style hérité indésirable

JavaScript

Vue hybride

Discussions similaires

Partager

Partager