字体大小处理JS

Question

我想改变字体，因为我们有字。

和我，如果已经存在，做的是，我并没有发现任何还没有任何图书馆纳闷，但可能我的搜索词不是很好。

我用一个简单的代码咆哮，增加和减少，但我需要更多的东西，如：

在这里我们有小字体，更小的差异，并在更大的字体差异较大。

     $(".increaseFont").on("click", function () {
                var $font = $("#myfont");
                var currentFontSize = parseInt($font.css('fontSize'));
                var targetFont = currentFontSize + 1;

                if (targetFont <= 24) {
                    $font.css("fontSize", targetFont + "px");
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myfont"> Hello, I am trying to do some JS </div>

<div class="increaseFont"> Click me </div>

你有什么建议吗？

更新：我不使用所见即所得的HTML编辑器或类似的东西，因为我创造我自己的董事会，也没有余地标记编辑器那里。那么，我做的是，当用户将鼠标悬停董事会，他/她可以有两个按钮编辑的字体大小。

Answer 1

您也可以尝试这样的：

$(".font-sizes").change(function () {
    var size = $(".font-sizes").val();
    console.log(size);
    $("#myfont").css({fontSize: size + "px"});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myfont"> Hello, I am trying to do some JS </div>

<select class="font-sizes">
  <option>--select font size--</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>

Answer 2

这样做的一个非常简单的方法，是遵循瓦苏和特里逻辑。请参阅以下内容。

谢谢了很多，伙计们。

$(".increaseFont").on("click", function () {
     var $font = $("#myfont");
     var fontSizeOptions = [5, 8, 10, 12, 14, 15, 30];
     var currentFontSize = parseInt($font.css('fontSize'));
     var currentIndex = fontSizeOptions.indexOf(currentFontSize);
     var targetFont = fontSizeOptions[currentIndex + 1];
 
 
     $font.css("fontSize", targetFont + "px");
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myfont" style="font-size: 5px;"> Hello, I am trying to do some JS </div>

<div class="increaseFont"> Click me </div>

P.S：代码仍然需要避免一些故障。