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

Version imprimable

Voir 40 message(s) de cette discussion en une page

re
et voila encore une enigme que je pige pas

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;" pour le size 3 en html
et donc je fait cela dans une boucle sur toutes les balises font
et bien non ca chage bien le parent mais pas les childrens
va savoir pourtant j'ait mis des alert avant et apres les font enfant ou parent sont bien identifiés
j'y comprends qeudale

si quelqu'un sait je prends
ou meme avec un replace global je prends aussi

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
function impression() {
  var zone;
  zone = document.getElementById('editeur').innerHTML;
  var contenu = document.createElement('DIV');
  contenu.innerHTML = zone;
  alert(contenu.outerHTML);
  var f = contenu.getElementsByTagName('FONT');
  for (var i = 0; i < f.length; i++) {
    if (f[i].size = 3) {
      f[i].style.fontSize = '20px';
    };
    if (f[i].size = 4) {
      f[i].style.fontSize = '22px';
    };
    if (f[i].size = 5) {
      f[i].style.fontSize = '32px';
    };
    if (f[i].size = 6) {
      f[i].style.fontSize = '40px';
    };
    if (f[i].size = 7) {
      f[i].style.fontSize = '60px';
    };
  }
  alert(contenu.innerHTML);
  var fen = window.open('', '', 'height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10');
  fen.document.title = 'Impression du document';
  fen.document.body.innerHTML += contenu.innerHTML;
  // fen.window.print();
  //fen.window.close();
  //fen.close();
  // return true;
}

code html a traiter
mille excuse pour l'indentation html j'ai beautifier qui pète les plombs il en a marre de moi :mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
  <p>&nbsp;
  </p>
  <font size="7"> q
    <font size="3"> sxd
    </font>cfvgb
    <font class="shado" style="text-shadow: 0px 0px 10px rgb(0,255,0);"> hjn, ; l: sdfghjkl
    </font>m
    <font class="shado" style="text-shadow: 0px 0px 10px rgb(255,0,255);"> zertyuiop ^ s
    </font>df
    <font class="shado" style="text-shadow: 0px 0px 10px rgb(255,102,0);"> ghjklmdfgh
    </font>jkldfghjklmù
  </font>
  <div class="divint" id="div35" style="border-radius: 6%; border: 1px solid black; border-image: none; left: 109.79px; top: 150.4px; width: 200px; height: 200px; position: absolute; z-index: 30;">
    <p></p>
  </div>
  <div class="divint" id="div36" style="border-radius: 6%; border: 1px solid black; border-image: none; left: 500.79px; top: 150.4px; width: 200px; height: 200px; position: absolute; z-index: 30;">
    <p></p>
  </div>
</div>

re
j'ai essayé aussi cela je dois me planter dans la syntaxe des replaces

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function impression() {
    var contenu = document.createElement("DIV");
    contenu.innerHTML = document.getElementById("editeur").innerHTML;
 
 
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"3\""/g, "style=\"font-size:20px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"4\""/g, "style=\"font-size:22px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"5\""/g, "style=\"font-size:32px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"6\""/g, "style=\"font-size:40px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"7\""/g, "style=\"font-size:60px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/"size=\"7\""/g, "style=\"font-size:60px;\"");
    alert(contenu.innerHTML);
    var fen = window.open("", "_blank", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
    fen.document.title = "Impression du document";
    fen.document.open();
    fen.document.write(contenu.innerHTML);
    // fen.window.print();
    //fen.window.close();
    //fen.close();
    // return true;
}

25/02/2017, 14h40
NoSmoking

Bonjour,

Citation:

mille excuse pour l'indentation html j'ai beautifier qui pète les plombs il en a marre de moi :mouarf:

il te faut peut être chercher un bon outil, pour cette fois encore j'ai « corrigé ».
25/02/2017, 14h55
patricktoulon

re

re
ben oui je veut bien un indenter html beautifier fait ca très bien pour javascript
25/02/2017, 15h57
melka one
jour

il manque un signe égale dans les if
Code:

1 2 3 if (f[i].size == 4) { f[i].style.fontSize = '22px'; };

1 pièce(s) jointe(s)

merci Melka one

je devient miro
entre temps j'ai trouver une autre solution avec les replace global
et en plus je redresse aussi la position des autres elements

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
 
function impression() {
    var contenu = document.createElement("DIV");
    contenu.id = "content";
    contenu.innerHTML = document.getElementById("editeur").innerHTML;
    topmoins = document.getElementById("editeur").offsetTop;
    contenu.innerHTML = contenu.innerHTML.replace(/size=\"7"/gi, "style=\"font-size:60px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/size=\"3"/gi, "style=\"font-size:20px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/size=\"4"/gi, "style=\"font-size:22px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/size=\"5"/gi, "style=\"font-size:32px;\"");
    contenu.innerHTML = contenu.innerHTML.replace(/size=\"6"/gi, "style=\"font-size:40px;\"");
    elements = contenu.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].tagName == "DIV" || elements[i].tagName == "IMG"|| elements[i].tagName == "TABLE") {
            if (elements[i].parentElement == contenu) {
                elements[i].style.top = elements[i].style.top.replace("px", "") - topmoins + 27 + "px";
 
 
            };
        };
    }
 
 
    var fen = window.open("", "_blank", "width=800,height=500,left=1,top=1,menubar=yes,toolbar=no,location=no,resizable=1,scrollbars=yes");
    fen.document.open();
    fen.document.write("<!doctype html><html><head><\/head><body onload=\"print();\">" + contenu.innerHTML + "<\/body><\/html>");
    fen.document.close();
    fen.window.close();
    fen.close();
    return true;
}

aperçu du rendu dans une nouvelle page du contenu de l’éditeur
Pièce jointe 248329
merci des retours

2 pièce(s) jointe(s)

Regarde ça.

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
 
<script>
function impression() {
 
  var zone;
  zone = document.getElementById('editeur').innerHTML;
  var contenu = document.createElement('DIV');
  contenu.innerHTML = zone;
  var f = contenu.getElementsByTagName('FONT');
  for (var i = 0; i < f.length; i++) {
    if (f[i].size == 3) {
      f[i].style.fontSize = '20px';
    };
    if (f[i].size == 4) {
      f[i].style.fontSize = '22px';
    };
    if (f[i].size == 5) {
      f[i].style.fontSize = '32px';
    };
    if (f[i].size == 6) {
      f[i].style.fontSize = '40px';
    };
    if (f[i].size == 7) {
      f[i].style.fontSize = '60px';
    };
 f[i].removeAttribute('size');  // il manquait ça
  }
  var fen = window.open('', '', 'height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10');
  fen.document.title = 'Impression du document';
  fen.document.body.innerHTML += contenu.innerHTML;
  // fen.window.print();
  //fen.window.close();
  //fen.close();
  // return true;
}
</script>

AVANT :
Pièce jointe 248365

APRES :
Pièce jointe 248359

25/02/2017, 23h44
patricktoulon

re

a oui!! j'ai pas encore le réflexe du remove.attribute

cela dit en vb on fait très attention au moulinage aussi ca peut etre gourmand

je replace 7 occurrences et c'est tout je sais pas comment le mesurer en javascript

mais je pense que le replace mouline beaucoup moins non??
cela dit j'aprends beaucoup de choses depuis quelques jours
ca fait un bon moment que je voulais me lancer dans la conversion de mon WYSYWIG vb en javascript j'avance petit a petit
la syntaxe javascript c'est une torture pour un VBISTE :mouarf:
merci pour test coup de mains très précieux
ps: j'ai fait encore évoluer ma palette
j'ai le gradient rotatif maintenant
26/02/2017, 00h17
badaze

Je dirais que le remove attribute est plus rapide.

Avec un objet map pour faire plus court, et sans innerHTML pour faire plus efficace :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'use strict';
 
var sizeToCss = {
  3: '20px',
  4: '22px',
  5: '32px',
  6: '40px',
  7: '60px'
};
 
var fonts = document.querySelectorAll('#editeur font');
for (var i = 0, len = fonts.length; i < len; i++) {
  var font = fonts[i];
  var size = parseInt(font.size, 10);
  if (!isNaN(size)) {
    if (size < 3) size = 3;
    if (size > 7) size = 7;
    font.style.fontSize = sizeToCss[size];
  }
  font.removeAttribute('size');
}

26/02/2017, 01h20
patricktoulon

re
alors la je dis respect!! watilin
voila une simplification qui me plait
je prends
et en plus ca ressemble beaucoup a la méthode que j'utilise en vb
je suis beaucoup plus a l'aise avec ce genre de méthode
nous en vb on a switch

en vb ca donne quelque chose comme ca
Code:

1 2 3 toto=2 titi=swith(toto=1,truc,toto=2,machin,toto=3,bidule) msgbox titi
26/02/2017, 01h32
patricktoulon

re
aie!!!!!
passe pas en HTA
Code:

1 2 var fonts = document.querySelectorAll('#editeur font'); for (var i = 0, len = fonts.length; i < len; i++) {
CA FAIT RIEN JE REMPLACE PAR TRADITIONEL JAVASCRIPT
JQUERY passe tres mal en hta
ou alors il faut que je mette des bonnes balises met et lun doctype
mais après je perds plein de fonctions classique JavaScripts et surtout toute les constantes application qui me servent dans le fichier

C’est curieux que querySelectorAll ne passe pas, il est supporté depuis IE8. Mais soit.

Code:

var fonts = document.getElementById('editeur').getElementsByTagName('font');

À propos de ma simplification du code de Badaze cette nuit, j’ai peut-être sur-simplifié. Si le but est d’injecter le contenu dans une nouvelle page pour l’imprimer, on est peut-être obligé d’utiliser innerHTML en fin de compte.

Cela dit, un clonage n’est pas difficile à faire, ça vaut le coup d’essayer :
Code:

1 2 3 4 5 6 7 var clone = document.getElementById('editeur').cloneNode(true); var fen = window.open('', '', 'height=500, …'); fen.document.title = 'Impression du document'; fen.document.body.appendChild(clone); fen.print(); fen.close(); return true;
Notons au passage que fen.window est exactement équivalent à fen tout court.

Et sinon, j’ai pensé à un truc : retirer les balises <font> qui n’ont plus aucun attribut.
Code:

1 2 3 4 5 6 7 if (!font.hasAttributes()) { var frag = document.createDocumentFragment(); // crée un fragment vide while (font.firstChild) { frag.appendChild(font.firstChild); // le fragment « aspire » les enfants du font un par un } font.parentElement.replaceChild(frag, font); // insère le fragment à la place du font }

26/02/2017, 11h38
NoSmoking

Citation:

Envoyé par patricktoulon

ou alors il faut que je mette des bonnes balises met et lun doctype
mais après je perds plein de fonctions classique JavaScripts et surtout toute les constantes application qui me servent dans le fichier

Patrick, il te faut coder SAINEMENT et arrêter de vouloir jouer les « apprentis bidouilleur » :lol:
:dehors:
26/02/2017, 12h00
patricktoulon

re

re
Bonjour noSmoking
ben pour le moment je démarre le javascript je vais pas me mettre a jquery tout de suite
sachant que mes support ne le su porte pas

sinon tu pense bien que mon WYSYWYG aurait une autre forme

mon soucis il est la c'est que le suport HTA et activX sont un peu dépasse
je vais quand même pas virer excel ,pratiquement toute mes app ont été développées avec ce support et le HTA depuis quelque année le hta était pour moi plus facile a manipuler avec du VBS et petit a petit je transformais mes app excel en HTA mais visiblement le javascript semble être prédominant de plus en plus alors je re transforme mes hta avec javascript
mais le jquery c'est même pas la peine je suis allé prendre les infos a la source et niet c'est un quark an a shunter toutes les erreurs qui se produisent
comme je l'ai dis ces deux support sont un peu ancien et n'ont pas subits de lifting depuis 2007
peut être que dans 10 ans va savoir hein !!!
26/02/2017, 12h20
patricktoulon

re

Watilin
oui le replace des font sans attribut m’intéresse pour les fonction shadow color qui travaille encore a l'ancienne avec des replace
je crois que noSmoking m'en avait déjà parler manipuler cela en dom

de toute façon ne vous inquiétez pas je suis pas prêt de partir hiihih
une fois les chose en place
fonction par fonction je reprendrais le code et utiliserais des méthode disons plus conventionnelles

pour le moment je bâti les structures

dire qu'en vb je tord le dom en deux et la je rame comme pas possible :ptdr:
la moindre erreur de point ,point virgule plante tout
en html je retrouve facilement dans F12 mais en hta tout est a l'oeuil
et je ne peut pas vérifier le code en html avec F12 puis le coller dans le hta car il y a des subtilités due a la librairie utilisée a savoir ie8/9 les balise meta sont la pour palier mais ne font pas tout je suis donc obligé de ruser
voila je sais j'ai pas choisi les conditions les plus facile mais c'est mon environnement
et le HTA j'aime bien plus que le .net ou vb6 même car je ne suis pas obligé de transporter ou de compiler d'autre librairie avec: ( html et javascript voir encore un peu de VBS pour CDO) et c'est tout

allez je vais arrêter mon menu émoticône que j'ai démarré aujourd'hui et je vais reprendre la fonction textshadow
rendez vous dans le post a ce sujet ;) si le coeur vous en dit

Citation:

ben pour le moment je démarre le javascript je vais pas me mettre a jquery tout de suite

personne ne t'a parler de jQuery, querySelector et querySelectorAll sont des méthodes issues de la « Selectors API ».

Citation:

une fois les chose en place
fonction par fonction je reprendrais le code et utiliserais des méthode disons plus conventionnelles

Non fais le tout de suite.

Citation:

en html je retrouve facilement dans F12 mais en hta tout est a l'oeuil

si cela fonctionne en HTML il n'y a aucune raison que cela ne fonction pas en HTA, à l'exception des méthodes non reconnues mais de plus en plus rares.

Citation:

il y a des subtilités due a la librairie utilisée a savoir ie8/9 les balise meta sont la pour palier mais ne font pas tout je suis donc obligé de ruser

Je te mets un exemple pour te montrer que tu te fais des idées, fausses, sur ces environnements.

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
<!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;
}
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
}
</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">
  <xmp id="code-brut"></xmp>
</div>
 
<script>
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
  oBrut.innerHTML = 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  
  oBrut.innerHTML = 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
oBrut.innerHTML = oDiv.innerHTML;
</script>
</body>
</html>

test au format HTML et HTA, tu peux meême jouer avec la <meta http-equiv="X-UA-Compatible" content="IE=8"> et la passer à content="Edge".

[EDIT] ce code ne fonctionne pas sous IE8 voir post #22

26/02/2017, 16h20
patricktoulon

re

re
a oui !!!

avec IE compatible edge en meta

essaie un background gradient et fait la même chose avec meta ie9

avec n'importe quelle meta compatible essaie de récupérer l''ID de l'application par javascript a part en string bien entendu walouh walouh!!!!!

a moins que récemment cela ai changé aux quel cas cela voudrait dire que msHTA.exe ai été mis a jour aussi

d'autant plus que dns ton code les balise HTA application devraient être en premier ( voir le tuto de phill)
26/02/2017, 18h39
NoSmoking

Citation:

essaie un background gradient et fait la même chose avec meta ie9

IE9 ne reconnaît pas les linear-gradient sauf à utiliser un filtre par exemple :

Code:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#aabbcc',GradientType=0 );

Citation:

n'importe quelle meta compatible essaie de récupérer l''ID de l'application par javascript a part en string bien entendu walouh walouh!!!!!

pas compris ce que tu cherches à faire, sinon dans l'exemple que j'ai donné un simple alert(id_application.id) suffit me semble t-il.

Citation:

d'autant plus que dns ton code les balise HTA application devraient être en premier

de mes souvenirs elle doit être dans la partie HEAD du document, ce qui est le cas.

En plus, et ce par pure curiosité, je viens de tester sans ... et ... bien ... ça marche !!
26/02/2017, 19h13
patricktoulon

re

a bon ???
essaie un gradient sans meta dans un hta ca merche pas ca veut bien dire que la librairie html n'est pas celle du IE installé

en plus ca c'est sur ca fait 10 ans que je fait du hta mais avec vbs il est certain que des que tu utilise une balise meta supérieur a 9 tu perds absolument la main sur les propriétés de l'application hta celle que tu met dans la balises bien entendu (.id,.caption,etc.........)
je retrouverais l'article sur ce point j'avais galérer un bon moment avant de savoir pour quoi
j'avais trouvé cette réponse sur MSDN
mais bon il faut pas oublier l'activx dans l'userform aussi qui lui est encore moins permissif
je te garanti que j'ai des codes qui fonctionnent sans erreur sur hta mais pas userform et inversement
probleme si tu met pas de meta compatible il y a des choses de javascript qui fonctionnent pas

j'essairai ton hta tout a l'heure je suis sur le shadowtext la et le nettoyage

Voir 40 message(s) de cette discussion en une page