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

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

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

Властивість fontStyle приймає значення у вигляді рядка. Можливі значення включають normal (нормальний стиль шрифту), italic (курсивний шрифт) та oblique (похилий шрифт). Якщо значення не було встановлено, властивість повертає порожній рядок.

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

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

// Встановлюємо курсивний стиль шрифту
element.style.fontStyle = 'italic';

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

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

// Встановлюємо нормальний стиль шрифту
element.style.fontStyle = 'normal';

// Встановлюємо похилий стиль шрифту
element.style.fontStyle = 'oblique';

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

let currentFontStyle = element.style.fontStyle;
console.log(currentFontStyle); // Виведе поточний стиль шрифту, наприклад, 'italic'

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

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

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

// Зміна стилю шрифту залежно від типу пристрою
if (navigator.userAgent.includes('Mobile')) {
  element.style.fontStyle = 'italic';
} else {
  element.style.fontStyle = 'normal';
}

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

Синтаксис

element.style.fontStyle

Значення

Return

Переглядачі

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

Приклади

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

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

// Функція для встановлення стилю шрифту залежно від часу доби
function updateFontStyle() {
    let currentHour = new Date().getHours();

    if (currentHour >= 6 && currentHour < 18) {
        // Вдень встановлюємо нормальний стиль шрифту
        element.style.fontStyle = 'normal';
    } else {
        // Ввечері та вночі встановлюємо курсивний стиль шрифту
        element.style.fontStyle = 'italic';
    }
}

// Викликаємо функцію при завантаженні сторінки
updateFontStyle();

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

// Функція для зміни стилю шрифту при наведенні миші
interactiveElement.addEventListener('mouseover', function() {
    this.style.fontStyle = 'italic';
});

// Функція для повернення до нормального стилю шрифту при відведенні миші
interactiveElement.addEventListener('mouseout', function() {
    this.style.fontStyle = 'normal';
});