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. Це дозволяє зробити ваші веб-додатки більш інтерактивними та адаптивними до різних умов.

правити

Порада

Перевіряйте поточне значення fontSize перед його зміною, щоб уникнути непотрібних оновлень та забезпечити логічність змін. Це допоможе уникнути зайвих операцій та помилок. Приклад: if (element.style.fontSize !== '20px') { element.style.fontSize = '20px'; }.

автор: Bond правити

Порада

Комбінуйте element.style.fontSize з іншими стилями для створення специфічних ефектів. Наприклад, змінюйте розмір шрифту разом з кольором або тінню тексту для досягнення кращої візуальної привабливості. Код може виглядати так: element.style.fontSize = '20px'; element.style.color = 'red';.

автор: Bond правити

Порада

Для кращої продуктивності, намагайтеся змінювати стилі рідко або в одному місці коду. Наприклад, якщо потрібно змінити кілька стилів, зробіть це одночасно, щоб уникнути повторних переробок браузером. Використовуйте: element.style.cssText = 'font-size: 16px; color: blue;';.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.fontSize

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="text">Демонстраційний елемент</div>
<div id="slider">Демонстраційний елемент</div>

// Функція для зміни розміру шрифту елемента
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);
});

<div id="responsiveText">Демонстраційний елемент</div>

// Функція для адаптивного зміни розміру шрифту в залежності від ширини вікна
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();