字體大小應該減少一旦它的長度大於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%";