長さが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

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文字未満になったときにフォントサイズをリセットしたい場合は、他のブロックを追加します。

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