仅使用 JavaScript 单击按钮即可增加字体大小

Question

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>

Answer 1

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

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.

Take a look at the code below:

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

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>

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>

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

That's it.

Answer 2

Try this:

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

Answer 3

Cycle through different font sizes by clicking on an element

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

Answer 4

Simple query

Font Size

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

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>

Answer 6

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