Remplacement de la propriété html par la propriété css en dom ne fonctionne pas

**patricktoulon** · 27/02/2017, 02h19

bon ben voila j'ai copier coller ton code hta dans un fichier tel quel

des que j'ouvre le fichier il plante a la ligne 104 obrut.innerhtml=..........pour apparemment aucune raison
Nom : Capture.JPG
Affichages : 201
Taille : 76,0 Ko

Nom : Capture.JPG
Affichages : 201
Taille : 76,0 Ko

et si je continu le script et que je clique sur modifier le font
voila encore un plantage
Nom : Capture.JPG
Affichages : 184
Taille : 81,2 Ko

**NoSmoking** · 27/02/2017, 17h36

des que j'ouvre le fichier il plante

SORRY, je ne t'ai pas mis la bonne version, mais la version « bac à sable » HTML.

...pour apparemment aucune raison

IE8 et - n'ont jamais apprécié que l'on attaque le innerHTML de la balise <xmp>.

Je te mets la version qui fonctionne, sans la balise <xmp>, j'ai ajouté 3 points au titre pour être sûr

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Test HTA...</title>
<meta name="Author" content="NoSmoking">
<HTA:APPLICATION 
  ID="id_application"
  APPLICATIONNAME="name_application"
  SINGLEINSTANCE="yes"    
 />
<style>
body {
  font: 1em/1.25 Verdana;
  margin:0;
  padding:0;
}
h1, h2 {
  margin: .5em .25em 0;
  padding: .5em;
  color: #444;
}
div {
  margin: 0 1em;
}
span {
  display: inline-block;
  color: #690;
}
span:first-letter {
  text-transform: capitalize;
  font-weight: bold;
  color: #6C0;
}
button {
  width: 10em;
  margin: .5em;
  font: inherit;
}
.code {
  border: 1px solid #CCC;
  background-color: #F8F8F8
}
#code-brut {  
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
</head>
<body>
<h1>Test HTA...</h1>
<h2>Bouton commande</h2>
<div>
  <button id="btn_font">Modifier Font</button>
  <button id="btn_balise">Modifier Balise</button>
</div>  
<h2>Rendu HTML</h2>
<div id ="conteneur">
  <font size="3">taille 3,
    <font size="2">taille 2 dans taille 3,
      <font size="1">taille 1 dans taille 2 dans taille 3.</font>
    </font>
  </font>
</div>
<h2>Code HTML</h2>
<div class="code">
  <pre id="code-brut"></pre>
</div>
<script>
// console pour IE8
function _console( obj, text){
  var dest = obj.textContent ? 'textContent' : 'innerText';  
  obj[dest] = text;
}
function changeFont() {
  var oElems = document.querySelectorAll('font');
  var i,
  nb = oElems.length;
  for (i = 0; i < nb; i += 1) {
    // ajoute font-size
    oElems[i].style.fontSize = (oElems[i].size * 16) + 'px';
    // delete attribut size
    oElems[i].removeAttribute('size');
  }
  // affichage HTML
   _console( oBrut, oDiv.innerHTML);
  // swap les boutons
  oBtn_balise.style.display = '';
  oBtn_font.style.display = 'none';
}
function changeBalise() {
  // récup. contenu
  var inner = oDiv.innerHTML;
  // modification des balises
  inner = inner.replace(/\<font/gi, '<span');
  inner = inner.replace(/\<\/font/gi, '</span');
  // modifie le HTML
  oDiv.innerHTML = inner;
  // affichage HTML  
  _console( oBrut, oDiv.innerHTML);
}
// get les éléments
var oBrut = document.querySelector('#code-brut');
var oDiv = document.querySelector('#conteneur');
//
var oBtn_font = document.querySelector('#btn_font');
oBtn_font.onclick = changeFont;
//
var oBtn_balise = document.querySelector('#btn_balise');
oBtn_balise.style.display = 'none';
oBtn_balise.onclick = changeBalise;
// affiche le code HTML
_console( oBrut, oDiv.innerHTML);
</script>
</body>
</html>

**Beginner.** · 08/03/2017, 23h21

Envoyé par patricktoulon

afin de standardiser le visuel sur mes 3 suport je remplace la propriété"size" de la balise "font" par son homologue correspondant approximatif CSS en l'occurence"style="font-size:20px;"

C'est la fonction execCommad qui te donne des truc comme ça avec le tag et le "size"... Savais-tu que cette fonction peut directement travailler avec du style CSS ?

Par exemple au lieu d'avoir ça :

Ceci est un exemple
Tu peux avoir ça :

Ceci est un exemple

Remplacement de la propriété html par la propriété css en dom ne fonctionne pas

JavaScript

Discussions similaires

Partager

Partager