如何更改使用 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>