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

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

element.style.font - це властивість, яка дозволяє встановлювати або отримувати шрифт елемента за допомогою однієї строки. Властивість font є скороченням для встановлення всіх властивостей шрифту в CSS, таких як font-style, font-variant, font-weight, font-size, line-height, і font-family.

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

[font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]

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

Приклад використання

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

// Встановлюємо значення font для елемента
textElement.style.font = "italic small-caps bold 16px/2 cursive";

// Отримуємо значення font для елемента
var fontValue = textElement.style.font;
console.log(fontValue); // Виведе "italic small-caps bold 16px / 2 cursive"

У цьому прикладі ми спочатку отримуємо доступ до елемента з id textElement. Потім встановлюємо значення font на italic small-caps bold 16px/2 cursive. Це означає, що текст в елементі буде відображатися курсивом, малими великими літерами, жирним шрифтом, розміром 16 пікселів, з міжрядковим інтервалом в два рази більшим за розмір шрифту, і використовуватиме шрифт cursive. Потім ми отримуємо значення font і виводимо його в консоль.

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

правити

Порада

Для ефективної зміни стилю шрифту при взаємодії з користувачем, наприклад, при наведенні курсору, element.style.font допомагає швидко оновити вигляд тексту. Наприклад:

element.onmouseover = function() {
  this.style.font = 'bold 18px/24px Arial, sans-serif';
};
element.onmouseout = function() {
  this.style.font = 'normal 16px/20px Arial, sans-serif';
};

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

Нотатка

Значення font повинно включати принаймні font-size і font-family. Якщо не встановлені font-style, font-variant, або font-weight, вони будуть використані зі значеннями за замовчуванням. Неправильний порядок значень або відсутність обов'язкових значень призведе до того, що властивість буде проігнорована.

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

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

Синтаксис

element.style.font

Переглядачі

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

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

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

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

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

Приклади

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

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

// Отримуємо доступ до елемента з 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();

<div id="userChoiceText">Демонстраційний елемент</div>
<input type="text" id="fontSelector" value="текст для прикладу" placeholder="Введи щось">

// Отримуємо доступ до елемента з 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();