使用JavaScript仅需点击一个按钮即可增加字体大小

Question

我试图通过按钮点击来增加字体大小。我已经让第一个按钮工作了，但是我理解不了第二个按钮。第二个按钮每次点击都会将字体增加1像素（我比较困扰）：

<input type="button" value="Increase Font Size 100px" onclick="increaseFontSizeBy100px()">
<p id="a">Font Size</p>

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>

<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }

    function increaseFontSizeBy1px() {
        var font = document.getElementById('b').style.fontSize;            
        font++;
    }
</script>

- canecorso

---

document.getElementById('b').style.fontSize 是一个字符串，而不是你可以递增的数字，即使你可以递增，你实际上也没有“设置”字体，你只是在递增某个变量。 - Sebastian Simon

Answer 1

把你的函数更改为下面的代码，看看会发生什么：

function increaseFontSizeBy100px() {
    txt = document.getElementById('a');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 100) + 'px';
}
function increaseFontSizeBy1px() {
    txt = document.getElementById('b');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 1) + 'px';
}

注意：正如您所看到的，这两个函数中存在大量重复。因此，如果我是您，我会将此函数更改为按给定值增加字体大小（在本例中为整数）。

那么，我们能做些什么呢？我认为我们应该将这些函数转换为更通用的函数。

看一下下面的代码：

function increaseFontSize(id, increaseFactor){
     txt = document.getElementById(id);
     style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
     currentSize = parseFloat(style);
     txt.style.fontSize = (currentSize + increaseFactor) + 'px';
}

例如，在您的按钮"增加字体大小1像素"中，您应该放置类似以下内容的东西:

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSize("b", 1)">
<p id="b">Font Size by 1 Pixel</p>

但是，如果我们想要一个 "缩小字体大小1像素" ，该怎么办？我们使用-1而不是1来调用函数。

<input type="button" value="Decrease Font Size 1px" onclick="increaseFontSize("b", -1)">
<p id="b">Font Size by -1 Pixel</p>

我们也解决了“减小字体大小”的问题。不过，我会将函数名更改为一个更通用的名称，并在我创建的两个函数中调用它: “increaseFontSize(id, increaseFactor)” 和 “decreaseFontSize(id, decreaseFactor)”。

就这样。

- Lucas Dias

---

不使用jQuery。赞。 - Dwight Gunning

Answer 2

试试这个：

<input type="button" value="Increase Font Size 100px" onclick="increaseFontSizeBy100px()">
<p id="a">Font Size</p>

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>

<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }
    function increaseFontSizeBy1px() {
        var id = document.getElementById('b');
        var style = window.getComputedStyle(id, null).getPropertyValue('font-size');
        var currentSize = parseInt(style);
        currentSize++;
        document.getElementById('b').style.fontSize = currentSize.toString();
    }
</script>

- Jacoby Yarrow

Answer 3

点击元素以实现不同字体大小的循环

$(document).ready(function() {
  $("#ModelIDBarcode").click(function() {
    newFontSize = incSize($('.barcode').css("font-size"), 10, 5, 120)
    $('.barcode').css("font-size", newFontSize);
  });
});

function incSize(currentSize, incr, min, max) {
  fSize = (parseFloat(currentSize) + incr) % max + min;
  return (fSize) + 'px';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label title="Click to increase size" id="ModelIDBarcode" class="barcode" style="font-family:'3 of 9 Barcode'; font-size:10px; background-color:white">
*ABarcodeValue*
</label>

- Walter de Jong

Answer 4

const button = document.querySelector('.bigger');
button.addEventListener('click', function(e) {
  const newFontSize =
    parseFloat(getComputedStyle(e.currentTarget).fontSize) + 1;
  e.currentTarget.style.fontSize = `${newFontSize}px`;
});

- Mamunur Rashid

---

你测试过了吗？ - Steak Overflow

虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议原因。 - lordhog

Answer 5

$(document).ready(function() {
  $("#ModelIDBarcode").click(function() {
    newFontSize = incSize($('.barcode').css("font-size"), 10, 5, 120)
    $('.barcode').css("font-size", newFontSize);
  });
});

function incSize(currentSize, incr, min, max) {
  fSize = (parseFloat(currentSize) + incr) % max + min;
  return (fSize) + 'px';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label title="Click to increase size" id="ModelIDBarcode" class="barcode" style="font-family:'3 of 9 Barcode'; font-size:10px; background-color:white">
*ABarcodeValue*
</label>

- chaman gupta

---

欢迎来到Stack Overflow！请在您的回答中包含一些细节。您更改了哪些代码以生成此答案？原始发布者做错了什么？否则，人们将不得不扫描您的代码以获取答案，并且您可能会收到负评。 - Captain Hypertext

Answer 6

简单查询

字体大小

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSizeBy1px()">
<p id="b">Font Size by 1 Pixel</p>


<script> 
    function increaseFontSizeBy100px() {
        document.getElementById('a').style.fontSize = "100px";
    }
    function increaseFontSizeBy1px() {
    var font = parseInt($("#b").css('font-size'));

    font++;
     document.getElementById('b').style.fontSize =font+ "px";
    }
</script>

- Rinto Antony

---

能否在没有jQuery的情况下实现？ - canecorso

Answer 7

信用：我参考了Jacoby Yarrow在2016年7月28日5:58的回答进行练习。这是改进的结果。

在您想要的位置设置id。如果您想要对整个页面实现大小更改，您可以将id设置为body id="TextLetterSizeChangeID"。或者，如果您想要其他元素，可以将其设置为该元素，如<p>或<span>。我删除了toString()。我将变量放在函数之外。此外，我给变量、函数和id取了更具联想性的名称。

<input type="button" value="Font + 1px" onclick="increaseSizeBy1px()">
<input type="button" value="Font - 1px" onclick="decreaseSizeBy1px()">
    
    <p id="TextLetterSizeChangeID"> Some example text where You will see the changes.</p>
    
    <script> 
    // extracting the current font-size, we'll get the value with word px, e.g. 16px
    
            let fontSizeCurr = window.getComputedStyle(TextLetterSizeChangeID, null).getPropertyValue('font-size');
    
    // with this we'll get rid of px; with pure number, math ops possible
    
            let fontSizeCurrPars = parseInt(fontSizeCurr);
    
            function increaseSizeBy1px() 
            {
                fontSizeCurrPars++;
                document.getElementById('TextLetterSizeChangeID').style.fontSize = 
                fontSizeCurrPars + "px";  
    // I needed to add + "px", otherwise it was not recognising new font size
    // e.g., it was just 16, and fontSize requires "px" to recognize, e.g. 16px
            }
    
            function decreaseSizeBy1px() 
            {
                fontSizeCurrPars--;
                document.getElementById('TextLetterSizeChangeID').style.fontSize = 
                fontSizeCurrPars + "px";  
            }
    
    </script>

- Tommaso Micini