在jquery中调整字体大小

Question

我有一个小问题。我想调整 jquery 中所有 html 元素的大小。我有代码，但我可以增加和减少到无穷大。

    var originalSize = $('html').css('font-size');
  // reset
   $(".resetMe").click(function(){
  $('html').css('font-size', originalSize); 

   });

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

  return false;
   });

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

  return false;
   });

我想限制增加和减少字体大小的数量？

如何编辑这段代码？

Answer 1

我做了类似的事情，但仍然不工作

var originalSize = $('html').css('font-size');
var resizeCount = 0;
// reset
$(".resetMe").click(function(){
    $('html').css('font-size', originalSize);

});

// Increase Font Size
$(".increase").click(function(){
    var currentSize = $('html').css('font-size');
    var currentSize = parseFloat(currentSize)*1.05;
    $('html').css('font-size', currentSize);
    return false;
    var resizeCount =+1;
    if (resizeCount = 3) {
        event.preventDefault();
    }
});

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

    return false;
});

Answer 2

您的代码中有几个错误，例如您在单击事件中覆盖 resizeCounter 值，因为您在它前面使用了 var 或者您有错误的 if 语句。 = 为变量分配一个新值，而不是像 == 和 === 这样的相等运算符。是的，您必须记住，如果您使用 rem 或 em 作为字体大小单位，则更改根元素的字体大小仅适用于子元素。

请注意，如果您增加字体大小，然后将其变小，则在下一次增加时，计数器将具有之前的值（不会自动重置）。

var originalSize = $('html').css('font-size');
var increaseCounter = 0;
var decreaseCounter = 0;

// reset
$(".resetMe").click(function() {
  $('html').css('font-size', originalSize);
  increaseCounter = 0;
  decreaseCounter = 0;
});

// Increase Font Size
$(".increase").click(function() {
  increaseCounter += 1;

  if (increaseCounter <= 3) {
    var currentSize = $('html').css('font-size');
    var biggerSize = parseFloat(currentSize) * 1.05;
    $('html').css('font-size', biggerSize);
  }
});

// Decrease Font Size
$(".decrease").click(function() {
  decreaseCounter += 1;

  if (decreaseCounter <= 3) {
    var currentSize = $('html').css('font-size');
    var decreasedSize = parseFloat(currentSize) * 0.95;
    $('html').css('font-size', decreasedSize);
  }
});

html {
  font-size: 16px;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  font-size: 1rem;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  outline: 0;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

p {
  font-size: 1.3rem;
}

#banner-message {
  background: #fff;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button class="resetMe">reset</button>
  <button class="increase">make bigger</button>
  <button class="decrease">make smaller</button>
</div>