[英]How to change font-weight in javascript for every onchange
我制作了一个可变字体,将字体粗细从 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>
您可以通过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>
您可以尝试像这样增加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>
我已经导入了引导程序以获得更好的效果。
提示: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.