如何更改使用 javascript 键入的每个字母的字体粗细

Question

我有我制作的这种可变字体，我想在网站上实现它，当用户键入时，每个字母的字体粗细都会增加。 我现在有这个代码，它会随着输入的整个文本而增长，但是那里的一切都会改变，而不是每个字母（所以我需要代码做的是说每个 keydown 事件的字体粗细都会改变，而不是整个文本，所以输入的第一个字母将具有较小的字体粗细并保持这种状态，但随后的字母会增加字体粗细）。

<p id="testarea" contentEditable="true">
   Type your text hereeeeeeeeeee
</p>

<button type="button" onclick="myFunction2()">uncensour</button>

<script>
   document.getElementById("testarea").onkeypress = function () { 
   myFunction() }
   document.getElementById("testarea").addEventListener("input", myFunction);
   var initWeight = 101;
   function myFunction() {
      document.getElementById("testarea").style.fontWeight = initWeight++ ;
   }
   function myFunction2() {
      document.getElementById("testarea").style.fontWeight = "101";
   }


   function myFunction2() {
      document.getElementById("testarea").style.fontWeight = "101";
   }
</script>

Answer 1

您需要将每个字母放在单独的例如<span>标记中，以便您可以单独定位每个字母。 您的 output 最终会看起来像这样

<p><span class="bolder">h</span><span class="bold">e</span>llo</p>