Appliquer plusieurs styles sur un même élément
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:
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:
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:
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:
var size= new Array("37px","36px","35px","38px","39px","34px","33px","40px","32px");
