Обработчик размера шрифта JS
Я хотел бы изменить шрифты, как у нас в 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>Что ты мне предлагаешь?
Обновлено: Я не использую HTML-редактор WYSIWYG или что-то подобное, потому что я создаю свою собственную доску, и там нет места для редактора разметки. Итак, что я делаю, так это то, что когда пользователь наводит курсор на доску, он / она может редактировать размер шрифта с помощью двух кнопок.
AFAIK, вы можете легко просто жестко закодировать массив для этого, например. [5, 5.5, 6.5, ...], а затем при увеличении/уменьшении размера шрифта просто получить индекс текущего размера шрифта в массиве и выбрать следующий/предыдущий элемент в массиве.
Установите размеры шрифта с использованием единиц rem и просто измените базовый размер на body, если вы хотите, чтобы все они имели относительный размер вверх и вниз sitepoint.com/understanding-and-using-rem-units-in-css
Юстинас, я использую разметку некоторых редакторов в другом месте, но это плата, которую я разработал, и я делаю это внутри платы.
Терри, да, я думаю, что это самый простой и лучший способ на данный момент. Я собираюсь придерживаться идеи массива.
Доминик, да, я должен использовать rem, это также поможет при разных размерах экрана. Чем вы, я буду держать с ним.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы также можете попробовать так:
$(".font-sizes").change(function () {
var size = $(".font-sizes").val();
console.info(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>Эй, Васу, это потрясающая идея, она похожа на идею массива. Кстати, я не знал, что я могу сделать $("#myfont").css({fontSize: size + "px"});, спасибо.
Очень простой способ — следовать логике Васу и Терри. См. следующее.
Большое спасибо, ребята.
$(".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.: код еще нужен для предотвращения некоторых сбоев.
Любой редактор WYSIWYG. Как CKEditor/summernote/и т. д.