如何在Javascript中的文本大小更改按鈕上添加限制？

我正在針對老人的網頁上工作。我有兩個按鈕可以讓網頁的文字變大或變小。但是，我需要限制文本可以更改的大小，以免混淆網頁。如何在Javascript中的文本大小更改按鈕上添加限制？

從文字的起點（即12px）開始，它應該可以放大兩次，否則它會離開頁面。也從起點開始，文字應該能夠減小的大小一次。我是Javascript新手，所以我不確定如何做到這一點。任何幫助將appriciated！

我當前的代碼：

<script> 
function resizeText(multiplier) { 
    if (document.body.style.fontSize == "") { 
    document.body.style.fontSize = "1.0em"; 
    } 
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em"; 
}</script> 

<input id="plusText" alt="Increase text size" value="Letter size +" type="button" onclick="resizeText(1) "/> 
<input id="minusText" alt="Decrease text size" value="Letter size &#8211" type="button" onclick="resizeText(-1) "/>

來源

2016-01-06 Amanda

題外話，但你不應該讓瀏覽器處理頁面的縮放和集中精力使你的內容可讀，在任何縮放級別，而不是採取這些問題到您的自己的手？ –

我想過這個，是的。然而，這個網頁是針對一個年長的人羣，他們可能不是技術上的所有人。我的僱主想要在網頁上找到按鈕，以方便用戶訪問（他對此也非常挑剔）。我知道在網頁上放置瀏覽器縮放按鈕是不可能的，因此放大文本是我能想到的唯一的其他合理的事情。 – Amanda

這裏是我的方法：

修改：

用戶可以增加字體大小最大'2em'和最小'1em'

修改功能：

function resizeText(multiplier) { 
    if (document.body.style.fontSize == "" || parseFloat(document.body.style.fontSize) <= 1) { 
    document.body.style.fontSize = "1.2em";  
    } 

    if (document.body.style.fontSize == '2em' && multiplier > 0) { 
     return false; 
    } else { 
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em"; 
    } 


}

function resizeText(multiplier) { 
 
    if (document.body.style.fontSize == "" || parseFloat(document.body.style.fontSize) <= 1) { 
 
    document.body.style.fontSize = "1.2em";  
 
    } 
 

 
    if (document.body.style.fontSize == '2em' && multiplier > 0) { 
 
     return false; 
 
    } else { 
 
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em"; 
 
    } 
 
    
 
    console.log(document.body.style.fontSize); 
 
}

<input id="plusText" alt="Increase text size" value="Letter size +" type="button" onclick="resizeText(1) "/> 
 
<input id="minusText" alt="Decrease text size" value="Letter size &#8211" type="button" onclick="resizeText(-1) "/> 
 

 

 

 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

來源

2016-01-06 18:52:53

非常感謝！這很好。 – Amanda

歡迎兄弟 –

如何在Javascript中的文本大小更改按鈕上添加限制？

回答

相關問題