Как изменять размер шрифта на веб-странице с помощью JavaScript?

Как можно реализовать увеличение размера шрифта текста до исходного, если он помещается в строку, при сохранении функционала уменьшения размера шрифта при необходимости?
  • 21 июня 2024 г. 23:01
Ответы на вопрос 2
Для изменения размера шрифта на веб-странице с помощью JavaScript можно использовать следующий код:

```javascript
// Увеличение размера шрифта
document.body.style.fontSize = "16px"; // устанавливаем начальный размер шрифта

function increaseFontSize() {
    var currentSize = parseFloat(document.body.style.fontSize);
    document.body.style.fontSize = (currentSize + 1) + "px"; // увеличиваем размер шрифта на 1 пиксель
}

// Уменьшение размера шрифта
function decreaseFontSize() {
    var currentSize = parseFloat(document.body.style.fontSize);
    document.body.style.fontSize = (currentSize - 1) + "px"; // уменьшаем размер шрифта на 1 пиксель
}
```

Для реализации увеличения размера шрифта до исходного, если текст помещается в строку, можно создать дополнительную функцию, которая будет проверять размер текста и, в случае его уменьшения, возвращать размер к исходному:

```javascript
// Увеличение размера шрифта до исходного
function increaseFontSizeToOriginal() {
    var textContainer = document.getElementById("text-container"); // предположим, что текст находится в элементе с идентификатором "text-container"
    var originalSize = parseFloat(window.getComputedStyle(textContainer, null).getPropertyValue('font-size'));
    var currentSize = parseFloat(textContainer.style.fontSize);

    if (currentSize < originalSize) {
        textContainer.style.fontSize = originalSize + "px"; // возвращаем размер шрифта к исходному
    }
}
```

Теперь при необходимости увеличить размер шрифта до исходного после его уменьшения, можно вызвать функцию `increaseFontSizeToOriginal()`.
У вас не сохранен исходный размер. Он нам нужен чтоб знать до каких пределов увеличивать. 
Допустим, нам надо проверить длину поля после ввода и удаления символов.
document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.querySelector("input");
    const originalFontSize = parseFloat(getComputedStyle(inputElement).fontSize);
    let currentSize = originalFontSize;
    // переменная для последнего значения поля input
    let lastValue = '';

    inputElement.addEventListener("input", () => {
        const value = inputElement.value;

        if (value.length > lastValue.length) {
            // добавлен символ
            if (inputElement.scrollWidth > inputElement.clientWidth) {
                // текст не помещается, уменьшаем шрифт
                currentSize -= 1;
            }
        } else if (value.length < lastValue.length) {
            // удалён символ
            if (currentSize < originalFontSize) {
                // восстанавливаем размер шрифта до начального
                currentSize += 1;
            }
        }

        inputElement.style.fontSize = `${currentSize}px`;
        // console.log(`Размер шрифта: ${currentSize}px`);
        lastValue = value;
    });

    // инициализация размера шрифта
    inputElement.style.fontSize = `${originalFontSize}px`;
});

Если ширина поля ввода фиксированная, то примерно так. Если она динамическая, надо добавить проверку на ширину input
Похожие вопросы