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

Increase the font size with a click of a button using only JavaScript

本文关键字：可增加 字体 按钮 JavaScript      更新时间：2023-09-26

我正试图通过单击按钮来增加字体大小。我有第一个要工作，但我无法理解第二个。第二个，每次点击都会使字体增加1px（我几乎被卡住了）：

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

将您的函数更改为以下代码中的函数，然后查看会发生什么：

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

那么，我们能做些什么呢？我认为我们应该把这些函数变成一个更通用的函数。

看看下面的代码：

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"中，您应该放置以下内容：

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

但是，如果我们想要"减小字体大小1px"，我们能做什么？我们用-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）

就是这样。

试试这个：

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

通过单击元素循环浏览不同的字体大小

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

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

简单查询

字体大小

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


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

相关文章：