仅使用JavaScript单击按钮即可增加字体大小 [英] Increase the font size with a click of a button using only JavaScript

问题描述

我试图通过单击按钮来增加字体大小。我有第一个工作的人，但我无法绕过第二个工作。第二个，每次单击都会使字体增加1像素（我非常困惑）：

I'm attempting to increase the font size with the click of a button. I have got the first one to work but I can't get my head around the second one. The second one, every click will increase the font by 1px (I'm pretty much stuck):

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

推荐答案

将函数更改为下面的代码，请参见会发生什么事：

Change your function to as in the code below and see what happens:

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

注意：如您所见，两种功能都有很多重复之处。因此，如果我是您，我将更改此功能以将字体大小增加给定值（在本例中为int）。

Note: as you can see, there are a lot of duplication in both functions. Therefore, if I were you, I would change this function to increase the fontsize by a given value(in this case, an int).

所以，我们可以做些什么关于它？我认为我们应该将这些功能转换为更通用的功能。

So, what we can do about it? I think we should turn these functions into a more generic one.

看看下面的代码：

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

现在，例如，在您的按钮增加字体大小1px ，您应该输入以下内容：

Now, for example, in your button "Increase Font Size 1px", you should put something like:

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

但是，如果我们要减小字体大小1px ，我们可以做的？我们用-1而不是1调用函数。

But, if we want a "Decrease Font Size 1px", what we can do? We call the function with -1 rather than with 1.

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

我们也解决了减小字体大小问题。但是，我会将函数名称更改为更通用的名称，并在我将创建的两个函数中分别调用它： increaseFontSize（id，gainFactor）和 decreaseFontSize（id，reductionFactor）。

We solve the Decrease Font Size problem as well. However, I would change the function name to a more generic one and call it in both two functions that I would create: increaseFontSize(id, increaseFactor) and decreaseFontSize(id, decreaseFactor).

就是这样。

这篇关于仅使用JavaScript单击按钮即可增加字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！