Javascript 将字体大小限制增加或减少到最大和最小jQuery

我有一个jQuery脚本，可以增加或减少网站CSS的字体大小和行高

我希望增加的大小被限制为三次点击，而减少的大小只有在增加大小链接被点击后才起作用。这样就不能减少默认大小，从而使最小的减少大小成为默认大小

如果用户更改字体大小，并导航到站点中的另一个页面，我希望显示“新大小”。i、 e.字体大小不会恢复为默认大小

以下脚本仅增加和减少字体大小和行高：

(function ($) {
    $.fn.fontResize = function (options) {
        var settings = {
            increaseBtn: $('#incfont'),
            decreaseBtn: $('#decfont')
        };
        options = $.extend(settings, options);
        return this.each(function () {
            var element = $(this);
            options.increaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize + 2) + 'px');
                element.css('line-height', (baseLineHeight + 2) + 'px');
            });
            options.decreaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize - 2) + 'px');
                element.css('line-height', (baseLineHeight - 2) + 'px');
            });
        });
    };
})(jQuery);
$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize();
});

---

我已经为此创建了一个JSFIDLE:

如果没有后端来存储用户的设置，则需要使用cookie、会话存储或本地存储将设置保存在浏览器上

这是一个相当不错的主意

JavaSript代码I已更改：

return this.each(function () {
  var element = $(this),
      clicks = 0; // add a clicks counter

  options.increaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks < 3) { // make sure limit is not exceeded
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize + 2) + 'px');
      element.css('line-height', (baseLineHeight + 2) + 'px');
      clicks += 1; // increase by 1
    }
  });

  options.decreaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks > 0) { // make sure there are clicks left
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize - 2) + 'px');
      element.css('line-height', (baseLineHeight - 2) + 'px');
      clicks -= 1; // decrease number of clicks left
    }
  });

返回此.each（函数（）{
变量元素=$（此），
clicks=0；//添加一个clicks计数器
options.increaseBtn.on（'click'，函数（e）{
e、 预防默认值（）；
如果（单击<3）{//请确保未超过限制
var baseFontSize=parseInt（element.css（'font-size'））；
var baseLineHeight=parseInt（element.css（'line-height'））；
css（'font-size'，（baseFontSize+2）+'px'）；
css（'line-height'，（baseLineHeight+2）+'px'）；
单击+=1；//增加1
}
});
选项。在（'click'，函数（e）上减少BTN{
e、 预防默认值（）；
如果（单击次数>0）{//请确保还有单击次数
var baseFontSize=parseInt（element.css（'font-size'））；
var baseLineHeight=parseInt（element.css（'line-height'））；
css（'font-size'，（baseFontSize-2）+'px'）；
css（'line-height'，（baseLineHeight-2）+'px'）；
单击次数-=1；//减少剩余的单击次数
}
});

这是可行的。但是对于用户设置的存储，您必须使用本地存储、会话存储或cookie。

使用两个变量 var incr=0； var decr=0； 如果条件限制你的字体大小增加到三点击，也考虑一件事，当你点击按钮，如果其他按钮被点击，那么你需要降低其他变量的值，这样你总是得到三点击增加/递减字体大小。（工作…）< /P>

options.increaseBtn.on（'click'，函数（e）{
e、 预防默认值（）；
var baseFontSize=parseInt（element.css（'font-size'））；
var baseLineHeight=parseInt（element.css（'line-height'））；
如果（incr0）
{decr--；}
}
});
选项。在（'click'，函数（e）上减少BTN{
e、 预防默认值（）；
var baseFontSize=parseInt（element.css（'font-size'））；
var baseLineHeight=parseInt（element.css（'line-height'））；
如果（0）
{incr--；}
}
});

您可以使用一个变量来跟踪字体大小的增减情况。这是您的小提琴的修订版本和代码：

(function ($) {
    $.fn.fontResize = function(options){
    var increaseCount = 0;
    var self = this;

    var changeFont = function(element, amount){
      var baseFontSize = parseInt(element.css('font-size'), 10);
      var baseLineHeight = parseInt(element.css('line-height'), 10);
      element.css('font-size', (baseFontSize + amount) + 'px');
      element.css('line-height', (baseLineHeight + amount) + 'px');
    };

    options.increaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 3){ return; }
      self.each(function(index, element){
        changeFont($(element), 2);
      });
      increaseCount++;
        });

    options.decreaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 0){ return; }
      self.each(function(index, element){
        changeFont($(element), -2);
      });
      increaseCount--;
    });
  }
})(jQuery);

$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
    increaseBtn: $('#incfont'),
    decreaseBtn: $('#decfont')
  });
});

我还让fontResize在调用过程中传递按钮，如果您试图将其设计为一个jQuery组件，这会更有意义。此外，由于更改字体大小的逻辑是重复代码，我将其分离为自己的函数，因此您不必重复自己

编辑：哎哟，略过了你想要持久化的部分！通过本地存储这很容易。点击这里

---

如果用户从页面导航，则不会保存任何配置。您当前使用的是JS作为客户端。如果确实要保存，请使用localStorage、sessionStorage或Cookie。另外，我还建议您在编写CSS时使用相对于html标记字体大小的ems/rems/percents（默认情况下，它是由浏览器设置的），这将允许您在一个位置修改字体大小，并使您的整个设计和布局相对于单个大小进行更改。更具响应性：）当我导航到另一个页面时，第二个选项导致了一些奇怪的字体大小。所有字体都比默认字体小，尽管我增加了字体大小。这是一个非常奇怪的问题，在JSFIDLE中很难调试。出于某种原因，刷新页面会影响

localStorage.increaseCount

。这里有热修复，但我认为这是一个JSFIDLE问题。这很好，我只需要弄清楚如何使用@rodaine建议的cookies插件

(function ($) {
    $.fn.fontResize = function(options){
    var increaseCount = 0;
    var self = this;

    var changeFont = function(element, amount){
      var baseFontSize = parseInt(element.css('font-size'), 10);
      var baseLineHeight = parseInt(element.css('line-height'), 10);
      element.css('font-size', (baseFontSize + amount) + 'px');
      element.css('line-height', (baseLineHeight + amount) + 'px');
    };

    options.increaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 3){ return; }
      self.each(function(index, element){
        changeFont($(element), 2);
      });
      increaseCount++;
        });

    options.decreaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 0){ return; }
      self.each(function(index, element){
        changeFont($(element), -2);
      });
      increaseCount--;
    });
  }
})(jQuery);

$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
    increaseBtn: $('#incfont'),
    decreaseBtn: $('#decfont')
  });
});