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

правити

Порада

Комбінуйте fontStyle з іншими стилями тексту, такими як fontWeight або textDecoration, для досягнення складніших стилістичних ефектів. Це допоможе створити більш привабливий і професійний вигляд тексту. Наприклад: element.style.fontStyle = 'italic'; element.style.fontWeight = 'bold';.

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

Порада

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

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

Порада

Змінюйте fontStyle динамічно під час взаємодії користувача з елементом, наприклад, при наведенні миші або при натисканні. Це може покращити користувацький досвід, зробивши інтерфейс більш інтерактивним. Наприклад, при наведенні миші: element.onmouseover = () => { element.style.fontStyle = 'italic'; }; element.onmouseout = () => { element.style.fontStyle = 'normal'; };.

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

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

Синтаксис

element.style.fontStyle

Переглядачі

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

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

Переглядач
	1	1	1	7	12	4

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

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

Приклади

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

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

// Отримуємо елемент за його ідентифікатором
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();

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

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

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

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