Изменить размер шрифта в jquery - PullRequest
Новая
       9

Изменить размер шрифта в jquery

0 голосов
/ 05 мая 2018

У меня вопрос к жизни. Я хотел бы изменить размер всех HTML-элементов в JQuery. У меня есть код, но я могу увеличиваться и уменьшаться до бесконечности. 

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

Хотелось бы ограничить счетчик увеличения или уменьшения размера шрифта?

Как редактировать этот код?

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

В вашем коде есть пара ошибок, например, вы переопределяете значение resizeCounter внутри своего события click, потому что вы использовали перед ним 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>
0 голосов
/ 05 мая 2018

Я делаю что-то подобное и все еще не работаю 

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;
});
...