使用JavaScript禁用HTML按鈕時，文本達到最小/最大尺寸

很抱歉，如果標題沒有很好地解釋了，我有這個頁面，有兩個按鈕和一個文本塊，一個是增加了文本和其它的尺寸爲了減少它。我想在文本達到最大或最小大小時禁用每個按鈕。例如：使用JavaScript禁用HTML按鈕時，文本達到最小/最大尺寸

點擊「做大」按鈕，如果文本達到最大尺寸，禁用按鈕。單擊「更小」按鈕，如果文本達到最小大小，則禁用該按鈕。

我想如果語句中的onclick功能使用下一個：

if(currentSize== "66.6667pt"){bigger.disabled=true;}

其中66.6667pt是大小的文本固定住之前到達。另一種情況，最小尺寸是6.75pt。

我不知道是否有核實，如果一個文本達到最小/最大尺寸的更好的方式，但這種方式，我做它不工作，「做大」按鈕被停用狀態，第二次文字達到66.6667pt，「小」按鈕從不被禁用。

這是整個HTML：

<!DOCTYPE html> 
    <html> 
<head lang="es"> 
    <title>Find Bug Script</title> 
    <meta charset="utf-8"> 
    <style> 
    </style> 
    <script> 
    window.onload=function(){ 

      var smaller = document.getElementById("smaller"); 
      var hello = document.getElementById("hello"); 
      if(!hello.style.fontSize){hello.style.fontSize="12pt";} 
      var factor=0.75; 
      bigger.onclick=function(){ 

      var currentSize=hello.style.fontSize; 
      if(currentSize== "66.6667pt"){bigger.disabled=true;} 
      var csz = parseInt(currentSize.replace("24pt", "")); 
      if(csz > 60) return; 
      csz/=factor; 
      hello.style.fontSize= csz+"pt"; 


      } 
      smaller.onclick=function(){ 

      if(hello.style.fontSize== "6.75pt"){smaller.disabled=true;} 
      var currentSize=hello.style.fontSize; 
      var csz = parseInt(currentSize.replace("24pt", "")); 
      if(csz <= 6) return; 
      csz*=factor; 
      hello.style.fontSize= csz+"pt"; 
      } 

    }; 
    </script> 
</head> 
<body> 
    <input type=button value="Bigger" id="bigger"/> 
    <input type=button value="Smaller" id="smaller" /> 
    <h1 id="hello" maxlength="5">¡Hello!</h1> 
</body>

這是我的第一個HTML/JS類，所以，讓我們試着學好它。感謝您的時間！

來源

2014-02-20 dlvx

您的按鈕是沒有得到禁止，因爲條件currentSize== "66.6667pt"是不正確的。好像你正在處理的禁用狀態的兩倍，因爲除了禁用按鈕，你的函數返回早期如果尺寸小於60：

if(csz > 60) return;

於是點擊了幾次後，你的尺寸，最終得到是65.33333333333333pt，這防止它變得更大上後續點擊次數，但它從未滿足的是禁用該按鈕的狀態。

你有你所認爲的最大允許大小兩個不同的東西：60在一個地方，而在另一個66.6667。嘗試定義一次，並在兩個地方使用它：

var maxSize=60; 
bigger.onclick=function(){ 
    var currentSize=hello.style.fontSize; 
    if(parseFloat(currentSize)> maxSize){bigger.disabled=true;} 
    var csz = parseInt(currentSize.replace("24pt", "")); 
    if(csz > maxSize) return; 
    csz/=factor; 
    hello.style.fontSize= csz+"pt"; 
}

這是working sample。嘗試爲minSize自己做同樣的事情。你也可以嘗試重新啓用按鈕，一旦他們再次縮小文本。

來源

2014-02-20 23:17:08 Cody

之前感謝您的重新啓用按鈕的想法，工作得很好！ – dlvx

我會做：

if(parseInt(currentSize)> 66){bigger.disabled=true;}

如果至少我明白你的問題。

來源

2014-02-20 22:55:43

謝謝，但由於文字的大小會浮動沒有與parseInt函數工作，試圖用parseFloat壽，和工作一樣 – dlvx

對fontSize的屬性直接執行數學有點凌亂。

我不會每次嘗試讀出文本大小，我只是在我的javascript代碼中保留一個「步進」變量，以跟蹤您所處的字體大小「步驟」。然後，我會將步進器中的存儲值插入一些公式中，以獲得最終的字體大小。要限制尺寸，可以確保「步長」高於或低於特定值。

事情是這樣的：

var factor = 0.75; 
var step = 0; 

bigger.onclick = function() { 
    step++; 
    step = Math.min(step, 4) // Step can never go above 4 
    reloadText(); 
} 

smaller.onclick = function() { 
    step--; 
    step = Math.max(step, -4) // Step can never go below -4 
    reloadText(); 
} 

function reloadText() { 
    // 14 is the default size, in points. 
    // If step is equal to zero, there will be no change in size. 
    // If step is below zero, the font will be smaller. 
    // If step is above zero, the font will be larger. 
    var size = 14 + (step*factor); 
    hello.style.fontSize= size+"pt"; 

    if (step >= 4) { 
     // Disable "bigger" button 
    } else { 
     // Enable "bigger" button 
    } 

    if (step <= -4) { 
     // Disable "smaller" button 
    } else { 
     // Enable "smaller" button 
    } 
}

來源

2014-02-20 23:08:04 aapierce

謝謝您的回答@aapierce和@cody，其次科迪的答案，它的工作，剛修改過的if語句是這樣的：

在bigger.onclick（），如果文本達到最大尺寸，禁用「做大」按鈕，但讓「小」按鈕

if(parseFloat(currentSize)> maxSize){bigger.disabled=true; smaller.disabled=false;}

在smaller.onclick

（）是相反的：

if(parseFloat(currentSize)<= minSize){smaller.disabled=true; bigger.disabled=false;}

將嘗試按照aapierce答案就在這subje多練CT

來源

2014-02-20 23:35:27 dlvx

使用JavaScript禁用HTML按鈕時，文本達到最小/最大尺寸

回答

相關問題