字体大小应该减少一旦它的长度大于15

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> 

请帮助我，“Hello World !!!”的字体大小在达到超过15个字符后应该改变。

Answer 1

您正在将字体大小设置为内文。将其设置为元素。

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