如何为每个 onchange 更改 javascript 中的字体粗细

Question

我制作了一个可变字体，将字体粗细从 101 更改为 900，并希望在网站上实现它，在该网站上，当用户键入时，字体会随着每个字母的键入而改变其粗细

我现在有点像这段代码，但它只是将它直接更改为字体粗细 900，而且不会慢慢处理。我对此很陌生，所以我不知道还能尝试什么感谢您的帮助！！

<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

为了更好的效果，我导入了bootstrap

TIP: 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>

如何为每个 onchange 更改 javascript 中的字体粗细

How to change font-weight in javascript for every onchange

html

javascript

fonts

function

onchange