Appliquer plusieurs styles sur un même élément

Invité · 28/02/2019, 08h39

Bonjour,

je formule une demande sur le forum pour la première fois parce que je n'arrive pas à régler un problème.

J'ai besoin de changer le style de chaque lettre dans une div contentEditable.

Voici ma partir html :

Code html :

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

1
2
3
4
5
<body>
<div id="edit">
  <div id="tape" contentEditable="true"></div>
</div>
</body>

Et voici ma partie JavaScript (pas de Jquery) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
onkeyup = function(){
    var kik = document.getElementById("tape");
    var texte = kik.innerText;
    var chars = texte.split("");
    var hek = texte.length;
    var h;
    document.getElementById("tape").innerHTML = "";
    for (var i = 0; i < texte.length; i++){
        h = chars[texte.length - hek]
        document.getElementById("tape").innerHTML += h;
        hek = hek - 1;
    }
}

Ma boucle "for" sert à envoyer chaque caractère un par un grâce à la variable "h".

Je pense que c'est à la fin de la boucle qu'il faut changer le style de "h" mais, comment faire sans changer tout le style de "#tape" ?

Merci à tois ceux qui prendrons le temps de me répondre.

PS: si vous ne comprenez pas ce que je veux faire, regarder l'exemple suivant :

J'ecris dans ma div contentEditable quelque chose, disons "test".

J'aimerais que le "t" est une font-size de 10px, le "e" de 15, le "s" de 9 etc..

Pour l'aléatoire j'utilise une fonction :

Code :

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

1
2
3
4
function size(){
    b = Math.floor(Math.random()*9)+1;
    return b;
}

"b" renvoie un nombre entre 1 et 9, qui me permet de piocher une taille dans mon tableau :

Code :

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

var size= new Array("37px","36px","35px","38px","39px","34px","33px","40px","32px");

**Watilin** · 01/03/2019, 19h03

Bonsoir,

Appliquer plusieurs styles sur un même élément

la réponse courte : on ne peut pas

La réponse un peu moins courte : il faut créer un nouvel élément pour chaque style différent qu’on veut appliquer. Il y a deux solutions :

puisque ton élément est contentEditable, tu peux utiliser execCommand. Je te renvoie à la doc car je ne pourrais pas l’expliquer mieux.

si tu trouves que execCommand n’est pas assez souple, tu peux faire les insertions de nouveaux éléments à la main. En général on choisit <span>.
Tu auras besoin des méthodes suivantes :

La méthode Text.splitText peut t’intéresser également.

Et il te faudra également manipuler la sélection, pour ça je te renvoie à cette conversation.

**Beginner.** · 01/03/2019, 21h32

Salut,

Une petite remarque : pas besoin de la fonction split pour accéder à chaque caractère d'une string : tu peux utiliser directement l’opérateur [] ou bien la fonction https://developer.mozilla.org/fr/doc.../String/charAt...

Envoyé par CrystalFirst

PS: si vous ne comprenez pas ce que je veux faire, regarder l'exemple suivant :

J'ecris dans ma div contentEditable quelque chose, disons "test".

J'aimerais que le "t" est une font-size de 10px, le "e" de 15, le "s" de 9 etc..

Ce n'est pas clair pour moi car apparemment (d’après ton code) tu sembles vouloir gérer l’évènement onkeyup qui est déclenché pour chaque caractère tapé (sauf si répétition) or ta fonction traite une chaine de caractère...

Il faudrait savoir ce que tu veux :

1- On tape un texte et une fois terminé tu veux appliquer un style à chaque lettre (par exemple en cliquant sur un bouton).
2- Ou bien : à chaque lettre tapée on applique tout de suite un style.
3- Ou bien une combinaison des deux premiers : à chaque lettre tapée on reprend la chaine entière et on applique un style à chaque lettre (ce qui fait que le style des lettres peut changer à chaque fois qu'on en tape une nouvelle puisqu'il (le style) est choisit de manière aléatoire).

Ou bien autre chose ???

Envoyé par CrystalFirst

Je pense que c'est à la fin de la boucle qu'il faut changer le style de "h" mais, comment faire sans changer tout le style de "#tape" ?

Ben il faudrait entourer chaque lettre par une balise ayant soit une class soit un style inline. Ainsi tu peux comme tu le veux appliquer une taille de police à chaque lettre mais pour le reste c'est le style de "#tape" qui est appliqué (comme la couleur, la police, le gras, l'italique...).

Pour mettre chaque lettre dans une balise, plusieurs manières, cela dépend de ce que tu veux comme demandé ci-dessus... : tu peux utiliser les méthodes du DOM que Watilin a mentionnées ou même travailler directement sur la string et envoyer le résultat dans le innerHTML par exemple...

PS : Si on utilise les méthodes du DOM que Watilin a mentionnées et que le coté performance est important on peut travailler d'abord sur un DocumentFragment : https://developer.mozilla.org/fr/doc...cumentFragment et à la fin l'insérer dans le DOM...

Envoyé par Watilin

puisque ton élément est contentEditable, tu peux utiliser execCommand. Je te renvoie à la doc car je ne pourrais pas l’expliquer mieux.

Oui cette fonction est puissante c'est celle que j'avais proposée ici : #2 mais c'est vrai que dans les cas simples (--> texte sélectionné qui n'est pas à cheval sur plusieurs balises ce qui semble être le cas ici puisque que le texte c'est en fait juste une lettre) on pourrait simplement utiliser la fonction surroundContents() qui a l'avantage de nous permettre d'ajouter le style CSS que l'on veut sans être limité...

Mais dans les deux cas il faudra obtenir automatiquement (avec du code) un range correspondant à chaque lettre... Mais c'est peut-être plus simple que de travailler avec les méthodes du DOM ??? (Bon ici perso la troisième possibilité me parait le plus simple : travailler directement sur la string et envoyer le résultat dans le innerHTML par exemple...)

Invité · 02/03/2019, 04h36

Hey !
Tout d'abord merci pour vos réponses très complètes à mes yeux !
J'ai cherché une méthode, et voici ce que j'ai trouvé :

Code :

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
 
for (var i = 0; i < texte.length; i++){
     h = chars[texte.length - hek];
     hek = hek - 1;
     var u = Math.floor(Math.random()*7)+1;
     var t = Math.random();
     if (u == 1){
      document.getElementById("tape").innerHTML += '<span id="1"></span>';
      document.getElementById("1").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="30px";
     }
     if (u == 2){
      document.getElementById("tape").innerHTML += '<span id="2"></span>';
      document.getElementById("2").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="31px";
     }
     if (u == 3){
      document.getElementById("tape").innerHTML += '<span id="3"></span>';
      document.getElementById("3").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="29px";
     }
     if (u == 4){
      document.getElementById("tape").innerHTML += '<span id="4"></span>';
      document.getElementById("4").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="32px";
     }
     if (u == 5){
      document.getElementById("tape").innerHTML += '<span id="5"></span>';
      document.getElementById("5").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="28px";
     }
     if (u == 6){
      document.getElementById("tape").innerHTML += '<span id="6"></span>';
      document.getElementById("6").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="33px";
     }m
     if (u == 7){
      document.getElementById("tape").innerHTML += '<span id="7"></span>';
      document.getElementById("7").id = t;
      document.getElementById(t).innerHTML += h;
      document.getElementById(t).style.fontSize="27px";
     }

Ma méthode rejoint un peu la votre (avec les spans, et les ids "dynamiques").
Ce que j'ai fait marche mais avec toutes les "astuces" que vous m'avez envoyé, je vois bien que je peux améliorer tout ca !
Merci !

**danielhagnoul** · 02/03/2019, 09h11

Un ID doit être unique dans la page web !

Dans votre code, perfectible, il y a pléthore d'ID t !

Invité · 02/03/2019, 09h20

Merci de ta réponse,
j'ai "optimisé" mon code du mieux que je puisse.

Code :

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
 
function fontchange(){
    var kik = document.getElementById("tape");
    var texte = kik.innerText;
    var index = texte.length;
    var h;
    var l;
    var hy = 0;
    document.getElementById("tape").innerHTML = "";
    for (var i = 0; i < texte.length; i++){
     index = hy;
     hy = hy + 1;
     var t = Math.random();
     h = texte.charAt(index);
     l = 20 + Math.floor(Math.random()*10) + "px" ;
     document.getElementById("tape").innerHTML += '<span id="1"></span>';
     document.getElementById("1").id = t;
     document.getElementById(t).innerHTML += h;
     document.getElementById(t).style.fontSize=l;
     setEndOfContenteditable(kik);
    }
   }

J'admets qu'une id doit être unique mais je ne sais pas comment faire, si tu as une id dis le moi (je suis un humoriste)

**Watilin** · 02/03/2019, 12h55

Bonjour !
un des points à considérer quand on veut améliorer son code, c’est d’arrêter d’utiliser innerHTML pour les raisons expliquées ici.
Ça te permet du même coup de supprimer un problème qu’il y a dans cette partie de ton code :

Code :

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

1
2
document.getElementById("tape").innerHTML += '<span id="1"></span>';
document.getElementById("1").id = t;

Actuellement, tu crées un élément <span> mais juste après tu le « perds de vue », et tu es obligé d’appeler getElementById pour le retrouver.

Ce passage peut être réécrit comme ceci :

Code :

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

1
2
3
let span = document.createElement("span");
span.id = t;
document.getElementById("tape").append(span);

append est une version moderne de appendChild, c’est bien de connaître les deux, je pense.
Regarde aussi textContent.

À propos des id t, ils sont uniques grâce à Math.random(). Du moins au sens statistique : JS génère des nombres aléatoires à 15 chiffes siginificatifs, les chances de collision sont donc de 1 sur 10¹⁵ (ou 10¹⁶ ? Je sus pas sûr

), c’est largement acceptable.
Petite anecdote, les standards HTML 4 et xHTML 1 exigent que les id commencent par une lettre. Je n’ai jamais rencontré de situation où ça pose problème, mais ça fait gueuler le validateur :
Nom : validation-error.png
Affichages : 945
Taille : 12,1 Ko

Nom : validation-error.png
Affichages : 945
Taille : 12,1 Ko

Par contre, avec le doctype HTML 5, on a le droit. De toute façon, les validateurs HTML sont de bons outils pour auditer son code, mais si on devait les respecter au pied de la lettre, on ne serait pas sortis de l’auberge. C’est comme JSLint

J’ai une petite astuce personnelle pour « compresser » un nombre aléatoire : je le passe en base 36. La base 36 utilise les chiffes de 0 à 9 plus les 26 lettres de l’alphabet. Ça fait des chaînes plus courtes. Exemple :

Code :

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

1
2
let r = Math.random(); // 0.198365524492354
let b36 = r.toString(36); // "0.752xwpsb333"

**Beginner.** · 02/03/2019, 13h11

Bon ben tu n'as pas donné les précisions sur ce que tu veux faire exactement...

Envoyé par CrystalFirst

J'admets qu'une id doit être unique mais je ne sais pas comment faire, si tu as une id dis le moi (je suis un humoriste)

Ben à partir du moment où tu n'utilises pas les méthodes du DOM que Watilin a mentionnées et que tu travailles avec des string autant tout faire comme ça et alors plus besoin de id : tu peux remplacer par exemple ces lignes :

Code javascript :

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

1
2
3
4
     document.getElementById("tape").innerHTML += '<span id="1"></span>';
     document.getElementById("1").id = t;
     document.getElementById(t).innerHTML += h;
     document.getElementById(t).style.fontSize=l;

par :

Code javascript :

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

kik.innerHTML += '<span style = "font-size:' + l + '">' + h + '</span>';

**Beginner.** · 02/03/2019, 13h13

Ah je discutais en même temps au téléphone et je n'avais pas vu la réponse de Watilin...

Invité · 02/03/2019, 16h10

Waw merci pour toute vos réponses !
J'ai trop de docs à lire et de méthodes à apprendre, je ferme le sujet avant de devoir changer tout le reste de ma page x)
Merci a vous !
EDIT: ce n'est plus la même question mais, j'utilise une fonction pour imprimer ma div: (elle n'est pas de moi)

Code :

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
 
function imprime_bloc(titre, objet) {
 // Définition de la zone à imprimer
 var zone = document.getElementById(objet).innerHTML;
 
 // Ouverture du popup
 var fen = window.open("", "", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
 
 // style du popup
 fen.document.body.style.color = '#000000';
 fen.document.body.style.backgroundColor = '#FFFFFF';
 fen.document.body.style.padding = "20px";
 
 // Ajout des données a imprimer
 fen.document.title = titre;
 fen.document.body.innerHTML += " " + zone + " ";
 
 // Impression du popup
 fen.window.print();
 
 return true;

Le seul problème est quand je visualise ma zone a imprimer, la police/la font (je sais jamais quelle est la différence) n'apparaît plus.
Il me mette celle de base a la place.
Mon css et en media="all".
Merci.

**NoSmoking** · 03/03/2019, 08h13

Bonjour,

Envoyé par Watilin

Petite anecdote, les standards HTML 4 et xHTML 1 exigent que les id commencent par une lettre. Je n’ai jamais rencontré de situation où ça pose problème, mais ça fait gueuler le validateur

concernant les ID commençant par un chiffre

document.getElementById("1") retourne bien l'élément
elem.querySelector("#1") retourne une erreur du type « is not a valid selector »

pour pouvoir le récupérer via les « selector » il faut utiliser la séquence d'échappement des valeurs Unicode

elem.querySelector("#\\0031") retourne bien l'élément

mais pour récupérer un élément par son ID autant utiliser document.getElementById qui est après tout fait pour ça

Il est a noté que le CSS déclaré comme suit n'est pas pris en compte.

Code css :

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

1
2
3
4
.1,
#1 {
  /* les déclarations */
}

Envoyé par CrystalFirst

EDIT: ce n'est plus la même question mais, j'utilise une fonction pour imprimer ma div: (elle n'est pas de moi)

Merci de fermer cette discussion et d'en ouvrir une autre
une question = une discussion

Invité · 03/03/2019, 09h29

Euhh, je ne vois pas ou l'on peut mettre le tag résolu..

Appliquer plusieurs styles sur un même élément

JavaScript

Discussions similaires

Partager

Partager