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

uinbv5nw  于 12个月前  发布在  Java
关注(0)|答案(7)|浏览(90)

我正在尝试通过点击按钮来增加字体大小。我已经得到了第一个工作,但我不能让我的头周围的第二个。第二个,每次点击都会增加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>
11dmarpk

11dmarpk1#

按照下面的代码将你的函数改为,看看会发生什么:

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

:如您所见,这两个功能有很多重复。因此,如果我是你,我会改变这个函数,将fontsize增加一个给定的值(在本例中,是一个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';
}

现在,例如,在按钮**“Increase Font Size 1 px”**中,您应该输入以下内容:

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

但是,如果我们想要一个**“减少字体大小1 px”**,我们可以做什么?我们使用-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)
就这样

zaqlnxep

zaqlnxep2#

试试这个:

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

brqmpdu13#

通过单击元素循环切换不同的字体大小

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

7cjasjjr4#

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

wvt8vs2t5#

简单查询
字体大小

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

qvtsj1bj6#

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

mzmfm0qo7#

学分:我指的是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>

相关问题