JS властивість CSSStyleDeclaration.fontVariant
Загальний опис
element.style.fontVariant - це властивість CSS, яка використовується для контролю над варіаціями шрифту в елементах HTML. Вона дозволяє змінювати вигляд тексту, наприклад, показувати текст у малих капітелях або інших варіаціях шрифтів.
Властивість fontVariant визначає, як текст буде відображатися у вигляді певних стилів, таких як "маленькі капітелі", "звичайні цифри" та інші варіації. Використовуючи цю властивість, ви можете створити більш стильний і читабельний текст на веб-сторінці.
Щоб використати властивість fontVariant в JavaScript, вам потрібно отримати доступ до HTML-елемента і змінити його стиль за допомогою об'єкта style. Нижче наведено приклад використання element.style.fontVariant.
// Отримуємо елемент за його ID
let myElement = document.getElementById('myElement');
// Змінюємо властивість fontVariant
myElement.style.fontVariant = 'small-caps';
У цьому прикладі ми отримали HTML-елемент з ідентифікатором myElement і встановили для його властивості fontVariant значення small-caps, що означає "маленькі капітелі". Це змусить всі малі літери в тексті відображатися як маленькі капітелі.
Властивість fontVariant підтримує кілька значень, які можна використовувати залежно від потрібного стилю. Ось деякі з них:
normal: Стандартний стиль тексту (за замовчуванням).small-caps: Малі капітелі.all-small-caps: Всі літери стають малими капітелями.petite-caps: Маленькі капітелі (рідко використовуються).all-petite-caps: Всі літери стають маленькими капітелями (рідко використовуються).unicase: Літери однакового розміру (змішування великих та малих літер).titling-caps: Великі літери, призначені для заголовків.
Ще один приклад використання fontVariant для зміни стилю тексту на "unicase":
let titleElement = document.querySelector('.title');
titleElement.style.fontVariant = 'unicase';
У цьому прикладі ми отримали елемент з класом title і встановили для його властивості fontVariant значення unicase, що означає, що літери будуть відображатися однакового розміру, незалежно від того, чи вони великі, чи малі.
Завдяки властивості fontVariant ви можете легко створювати різні варіації текстових стилів, що дозволяє зробити ваш веб-дизайн більш привабливим та професійним. Важливо пам'ятати, що не всі браузери можуть підтримувати всі значення fontVariant, тому завжди перевіряйте сумісність з різними браузерами для забезпечення кращого користувацького досвіду.
| Порада: | Комбінуйте |
| Порада: | Коли використовуєте |
Синтаксис
element.style.fontVariantЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачу вибирати варіант шрифту для тексту через перемикачі, змінюючи вигляд тексту на сторінці в реальному часі.
У цьому прикладі ми змінюємо стиль тексту елементів списку на основі умовного критерію - наявності класу highlight. Якщо елемент містить цей клас, то його текст буде відображатися малими капітелями, інакше - у стандартному стилі. Це корисно для виділення окремих елементів списку, наприклад, у випадку відображення вибраних чи важливих пунктів.
// Отримуємо елементи списку
let listItems = document.querySelectorAll('li');
// Проходимо по кожному елементу списку
listItems.forEach(item => {
// Перевіряємо, чи містить елемент певний клас
if (item.classList.contains('highlight')) {
// Змінюємо властивість fontVariant на small-caps
item.style.fontVariant = 'small-caps';
} else {
// Змінюємо властивість fontVariant на normal
item.style.fontVariant = 'normal';
}
});Цей приклад демонструє динамічне оновлення стилю тексту на основі введених користувачем даних. Якщо довжина введеного тексту перевищує 10 символів, текст буде відображатися у стилі unicase, інакше - у стилі all-small-caps. Такий підхід дозволяє створювати інтерактивні інтерфейси, де стиль тексту змінюється в реальному часі залежно від введених даних, підвищуючи користувацький досвід.
// Отримуємо елемент для відображення введеного тексту
let outputElement = document.getElementById('output');
// Функція для оновлення стилю тексту
function updateFontVariant(inputText) {
// Якщо довжина тексту більше 10 символів, використовуємо unicase
if (inputText.length > 10) {
outputElement.style.fontVariant = 'unicase';
} else {
// Інакше використовуємо all-small-caps
outputElement.style.fontVariant = 'all-small-caps';
}
// Встановлюємо введений текст у елемент
outputElement.textContent = inputText;
}
// Імітуємо введення даних користувачем
let userInput = "Динамічний текст";
updateFontVariant(userInput);