字体处理程序JS

Question

我想更改Word上的字体。

，我想知道是否已经有这样做的库，但我还没有找到任何东西，但是可能我在搜索中的用语不是很好。

我正在使用简单的代码来增加和减少以下内容，但我将需要更多类似的内容：

在小字体，小差异和大字体大差异的地方。

     $(".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>

你对我有什么建议？

更新： 我没有使用WYSIWYG 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

一个非常简单的方法是遵循Vasu和Terry的逻辑。 请参阅以下内容。

非常感谢你们。

$(".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 .：代码仍然需要防止某些故障。