如何為每個 onchange 更改 javascript 中的字體粗細

Question

我制作了一個可變字體，將字體粗細從 101 更改為 900，並希望在網站上實現它，在該網站上，當用戶鍵入字體時，每個鍵入的字母都會改變其粗細

我現在有這個代碼，但它只是將它直接更改為字體粗細 900，並且不會慢慢地 go 我對此真的很陌生，所以我不知道還能嘗試什么感謝您的幫助！

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


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

<script>



document.getElementById("testarea").onchange = function() {myFunction()}
document.getElementById("testarea").addEventListener("input", myFunction)
function myFunction() {
  document.getElementById("testarea").style.fontWeight = "900";
}
function myFunction2() {
  document.getElementById("testarea").style.fontWeight = "101";
}

</script>

Answer 1

您可以通過onkeypress事件來實現這一點。

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

 <p id="testarea" contentEditable="true"> Type your text here </p> <button type="button" onclick="myFunction2()">uncensour</button>

Answer 2

您可以嘗試像這樣增加font-weight 。

<p id="testarea" onkeyup="myFunction2()" contentEditable="true">
Type your text here
</p>


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

<script>

var bold = 100;

// document.getElementById("testarea").onchange = function() {myFunction()}
// document.getElementById("testarea").addEventListener("input", myFunction)

function myFunction2() {
  document.getElementById("testarea").style.fontWeight = bold;
  bold+=100;
  console.log(bold);
}

</script>

Answer 3

我已經導入了引導程序以獲得更好的效果。

提示：select 一種字體樣式，具有大量字體粗細以查看效果。

 document.getElementById("testarea").onchange = function() {myFunction()} document.getElementById("testarea").addEventListener("input", myFunction); var isItChanges = true; function myFunction() { document.getElementById("testarea").style.fontWeight = "900"; var fontWeight = 100; if(isItChanges){ isItChanges = false; var timer = setInterval(()=>{ fontWeight = fontWeight + 15; document.getElementById("testarea").style.fontWeight = fontWeight; if(fontWeight > 900){ clearInterval(timer); } },1); } } function myFunction2() { document.getElementById("testarea").style.fontWeight = "101"; isItChanges = true; }

 #testarea{ font-weight: 100; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <p id="testarea" contentEditable="true"> Type your text here </p> <button type="button" onclick="myFunction2()">uncensour</button>