主页 / 问题 / 739219
Accepted
msupreme
Asked:2020-11-02 16:51:00 +0800 CST2020-11-02 16:51:00 +0800 CST

jquery字体增减实现

  • 772

你好。我正在网站上实现字体大小的增加和减少，有这样的标记。我无法弄清楚我做错了什么？

看起来问题出在这一行： $body.css('font-size', ${fontSize + 10}%); 从理论上讲，这应该增加字体，但不起作用。

$(document)
    .on('click', '#upFont', e => {
        e.preventDefault();

        let $body = $('body');
        let fontSize = $body.css('font-size') || 100;

        $body.css('font-size', `${fontSize + 10}%`);

});
<div class="weak-panel__font">
   <div>Размер шрифта</div>
   <a class="weak-panel__button" id="downFont" href="#">A -</a>
   <a class="weak-panel__button" id="upFont" href="#">A +</a>
</div>

javascript

2 个回答

  1. 或者像这样，以防它对某人有用））

    const changeFontSize = operation => {
    let step = 2,
        $body = $('body'),
        fontSize = $body.css('font-size') || '16px';
    $body.css('font-size', operation == 'inc' ?
        `${parseInt(fontSize) + step}px` :
        `${parseInt(fontSize) - step}px`
    );
};

$(document)
    .on('click', '#upFont', e => {
        e.preventDefault();
        changeFontSize('inc');
    })
    .on('click', '#downFont', e => {
        e.preventDefault();
        changeFontSize('dec');
    });

    • 1
  2. Best Answer

    或多或少是这样的：

    $(function() {

  $(document)
    .on('click', '#upFont', e => {
      e.preventDefault();

      let fontSize = $('body').css('font-size') || '12px';
      let newSize = parseInt(fontSize) * 1.1;
      $('body').css('font-size', newSize + 'px');

    });

});
    body {
  font-size: 12px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
  <div class="weak-panel__font">
    <div>Размер шрифта</div>
    <a class="weak-panel__button" id="downFont" href="#">A -</a>
    <a class="weak-panel__button" id="upFont" href="#">A +</a>
  </div>

  <div class="text">Текст</div>

</body>

    • 0

相关问题