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");

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

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager