Question

<div id="textLength" class="textLength"> Hello World !!!</div>
<script>
function testTextLength() {
    var textL = document.getElementById("textLength").innerText;
    var maxLength = 15;
    if (textL.length > maxLength) {
        textL.style.fontSize = "250%";
    }
}
</script>

请帮助我#34; Hello World !!!＆＃34;的字体大小。在达到超过15个字符后应该更改。

Answer 1

您正在将fontsize设置为innertext。将其设置为元素。

<div id="textLength" class="textLength"> Hello World !!!</div>
<script>
function testTextLength() {
    var textL = document.getElementById("textLength");
    var maxLength = 15;
    if (textL.innerText.length > maxLength) {
        textL.style.fontSize = "250%";
    }
}
</script>

Answer 2

这就是我要做的。将您的div更改为输入：

<input id="textLength" class="textLength">

然后，将事件绑定到它，如'keyup'。你需要这个，所以你的JS知道什么时候检查输入文本的长度。

<script>
     var textL = document.getElementById("textLength");

     textL.addEventListener('keyup',function(){
         var maxLength = 15;
         var txt = textL.value;
         if (txt.length > maxLength) textL.style.fontSize = "250%";
     });
</script>

除了'keyup'，你还可以听'keypress'，'keydown'或'change'。在这种情况下，我建议使用'keyup'。这是一个有效的例子：

https://jsfiddle.net/wxmvagL3/3/

如果要在长度低于15个字符时重置字体大小，请添加一个else块：

if (txt.length > maxLength) textL.style.fontSize = "250%";
else textL.style.fontSize = "100%";

一旦长度大于15，字体大小就会减少

2 个答案: