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