javascript - 当文本达到最小/最大大小时,使用 JavaScript 禁用 HTML 按钮

标签 javascript html css button click

抱歉,如果标题没有解释清楚,我有这个页面,有两个按钮和一个文本 block ,一个用于增加文本的大小,另一个用于减小文本的大小。 当文本达到最大或最小大小时,我想禁用每个按钮。例如:

单击“变大”按钮,如果文本达到最大尺寸,则禁用该按钮。 单击“更小”按钮,如果文本达到最小大小,则禁用该按钮。

我尝试在 onclick 函数中使用下一个 if 语句:

    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 类(class),所以,让我们试着学好它。 感谢您的宝贵时间!

最佳答案

直接对 fontSize 属性进行数学计算有点困惑。

我不会每次都尝试读出文本大小,而是在我的 javascript 代码中保留一个“stepper”变量,它会跟踪您所使用的字体大小“step”。然后我将步进器中的存储值插入某个公式以得出最终的字体大小。要限制大小,您可以确保“步长”高于或低于特定值。

像这样:

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
    }
}

关于javascript - 当文本达到最小/最大大小时,使用 JavaScript 禁用 HTML 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21921431/

相关文章:

javascript - ng-repeat 中不需要的 GET 请求

javascript - 使用 turfjs 在多边形和多重多边形之间相交

javascript - 简单的篮球运动 Javascript

html - 滚动文章后,导航栏变得不需要透明

html - 在 html/css 中隐藏嵌套 anchor

javascript - 如何在我的例子中添加 dom 元素

jQuery .load() 帮助已更新

javascript - 如何从 Javascript 或 Nodejs 执行 Python 脚本?

html - 容器和文章元素之间的神秘差距

JavaScript 不显示任何警告对话框