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

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

// Отримуємо доступ до елемента з id "timeBasedText"
var timeBasedText = document.getElementById("timeBasedText");

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

    if (currentHour < 12) {
        // Ранковий стиль: легкий, курсив, розмір 14px
        timeBasedText.style.font = "italic normal 14px/1.5 'Arial'";
    } else if (currentHour < 18) {
        // Денний стиль: напівжирний, малими великими літерами, розмір 16px
        timeBasedText.style.font = "normal small-caps bold 16px/1.5 'Georgia'";
    } else {
        // Вечірній стиль: жирний, розмір 18px
        timeBasedText.style.font = "normal normal bold 18px/1.5 'Times New Roman'";
    }
}

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

У цьому прикладі стиль шрифту елемента змінюється на основі вибору користувача з випадаючого меню. Користувач може вибрати один з кількох шрифтів, таких як serif, sans-serif, monospace, або cursive, і відповідно до цього вибору стиль шрифту буде оновлено. Це корисно для надання користувачам можливості налаштовувати вигляд тексту на сторінці за їхніми вподобаннями, що підвищує зручність використання інтерфейсу.

// Отримуємо доступ до елемента з id "userChoiceText" та випадаючого меню з id "fontSelector"
var userChoiceText = document.getElementById("userChoiceText");
var fontSelector = document.getElementById("fontSelector");

// Функція для оновлення стилю шрифту на основі вибору користувача
function updateFontStyleBasedOnUserChoice() {
    var selectedFont = fontSelector.value;

    switch (selectedFont) {
        case 'serif':
            userChoiceText.style.font = "normal normal normal 16px 'Times New Roman'";
            break;
        case 'sans-serif':
            userChoiceText.style.font = "normal normal normal 16px 'Arial'";
            break;
        case 'monospace':
            userChoiceText.style.font = "normal normal normal 16px 'Courier New'";
            break;
        case 'cursive':
            userChoiceText.style.font = "italic normal normal 16px 'Comic Sans MS'";
            break;
        default:
            userChoiceText.style.font = "normal normal normal 16px 'Arial'";
            break;
    }
}

// Додаємо обробник події для зміни вибору в випадаючому меню
fontSelector.addEventListener("change", updateFontStyleBasedOnUserChoice);

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