JS властивість CSSStyleDeclaration.fontSize

Загальний опис

element.style.fontSize — це властивість, що використовується для встановлення або отримання розміру шрифту елемента в документі. Вона дозволяє динамічно змінювати розмір тексту на веб-сторінці за допомогою JavaScript.

Властивість fontSize використовується для маніпулювання стилем шрифту елемента через JavaScript. Ця властивість приймає значення у вигляді рядка, який визначає розмір шрифту. Значення можуть бути задані в різних одиницях, таких як px, em, %, або ж можуть бути такими ключовими словами, як small, medium, large.

Щоб змінити розмір шрифту елемента, потрібно спочатку отримати доступ до цього елемента через DOM (Document Object Model), а потім встановити нове значення для властивості fontSize. Наприклад:

// Отримуємо елемент за його ідентифікатором
let element = document.getElementById('myElement');

// Встановлюємо розмір шрифту в 20 пікселів
element.style.fontSize = '20px';

Цей код знайде елемент з ідентифікатором myElement і встановить для нього розмір шрифту 20 пікселів.

Ви також можете використовувати інші одиниці вимірювання:

// Встановлюємо розмір шрифту в 1.5em
element.style.fontSize = '1.5em';

// Встановлюємо розмір шрифту в 150%
element.style.fontSize = '150%';

Щоб отримати поточний розмір шрифту елемента, достатньо прочитати значення властивості fontSize:

let currentFontSize = element.style.fontSize;
console.log(currentFontSize); // Виведе поточний розмір шрифту, наприклад, '20px'

Зазначимо, що якщо розмір шрифту не був встановлений безпосередньо через властивість style, то значення element.style.fontSize буде порожнім рядком. Це означає, що для отримання фактичного розміру шрифту, встановленого за допомогою CSS, слід використовувати метод getComputedStyle:

let computedFontSize = window.getComputedStyle(element).fontSize;
console.log(computedFontSize); // Виведе поточний розмір шрифту з урахуванням стилів CSS, наприклад, '16px'

Використання element.style.fontSize дозволяє динамічно змінювати зовнішній вигляд веб-сторінки, що є корисним для створення інтерактивного та адаптивного контенту. Наприклад, ви можете змінювати розмір шрифту залежно від дій користувача або умов, таких як розмір вікна браузера.

// Зміна розміру шрифту залежно від ширини вікна браузера
if (window.innerWidth < 600) {
  element.style.fontSize = '12px';
} else {
  element.style.fontSize = '16px';
}

У підсумку, element.style.fontSize є потужним інструментом для управління стилями елементів на веб-сторінці через JavaScript. Це дозволяє зробити ваші веб-додатки більш інтерактивними та адаптивними до різних умов.

Синтаксис

element.style.fontSize

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Функція для зміни розміру шрифту елемента
function changeFontSize(element, size) {
    element.style.fontSize = size + 'px';
}

// Отримуємо елемент та повзунок
let textElement = document.getElementById('text');
let slider = document.getElementById('slider');

// Додаємо обробник події для зміни розміру шрифту при зміні значення повзунка
slider.addEventListener('input', function() {
    changeFontSize(textElement, this.value);
});

// Функція для адаптивного зміни розміру шрифту в залежності від ширини вікна
function updateFontSize() {
    let element = document.getElementById('responsiveText');
    let windowWidth = window.innerWidth;

    if (windowWidth < 600) {
        element.style.fontSize = '12px';
    } else if (windowWidth < 900) {
        element.style.fontSize = '16px';
    } else {
        element.style.fontSize = '20px';
    }
}

// Додаємо обробник події для зміни розміру вікна
window.addEventListener('resize', updateFontSize);

// Викликаємо функцію для встановлення початкового розміру шрифту
updateFontSize();