Question

我使用Bootstrap 3构建了一个网站。我现在想要的是2个按钮。一个用于增加页面的所有元素的字体大小，一个用于减少。（对于残障人士）

我使用这个jquery脚本：

$(document).ready(function(){
  // Increase Font Size
  $(".increase").click(function(){
    var currentSize = $('*').css('font-size');
    var currentSize = parseFloat(currentSize)*1.2;
    $('*').css('font-size', currentSize);

    return false;
  });

  // Decrease Font Size
  $(".decrease").click(function(){
    var currentFontSize = $('*').css('font-size');
    var currentSize = $('*').css('font-size');
    var currentSize = parseFloat(currentSize)*0.8;
    $('*').css('font-size', currentSize);

    return false;
  });
  });

但正如我可以通过使用sellect all *看到的那样，按钮首先减少然后增加或做其他任何事情。否则，使用id名称就没有任何反应。

  // Increase Font Size
  $(".increase").click(function(){
    var currentSize = $('#all-wrapper').css('font-size');
    var currentSize = parseFloat(currentSize)*1.2;
    $('#all-wrapper').css('font-size', currentSize);

    return false;
  });

您可以看到2个JSFiddle here和here。如果你能建议我，我会很感激的。谢谢！

Answer 1

你不能像往常一样增加乘法的字体大小！在你做第一种方法时

var currentFontSize = $('*').css('font-size');

它将取第一个选定元素的字体大小为按钮，在下一个句子中将按钮字体的1.2倍应用于每个元素。所以它首先减少按钮字体大小然后增加。

虽然第二种方法有效，但$（'＃all-wrapper'）div的字体大小超过了h1标签，所以它不可见。

为了实现增加或减少字体功能，我们通常会使用不同的字体大小来切换css。

增加和减少Bootstrap 3 Framework上的字体大小按钮

1 个答案: