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

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

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

Властивість fontWeight визначає товщину шрифту, яку можна задати як за допомогою ключових слів (наприклад, normal, bold), так і числових значень (наприклад, 100, 200, 300 і т.д.). Ця властивість є важливою для дизайнерів і розробників, оскільки дозволяє керувати візуальним акцентом на різних частинах тексту.

Щоб використати властивість fontWeight в JavaScript, вам потрібно отримати доступ до HTML-елемента і змінити його стиль за допомогою об'єкта style. Нижче наведено приклад використання element.style.fontWeight.

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

// Змінюємо властивість fontWeight
myElement.style.fontWeight = 'bold';

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

Властивість fontWeight підтримує кілька значень, які можна використовувати залежно від потрібного стилю:

• normal: Стандартна товщина шрифту (за замовчуванням).
• bold: Жирний шрифт.
• bolder: Жирніший, ніж стандартний шрифт.
• lighter: Тонший, ніж стандартний шрифт.
• Числові значення від 100 до 900: Чим більше число, тим товстіший шрифт. Наприклад, 100 дуже тонкий, а 900 дуже жирний.

Ще один приклад використання fontWeight для зміни товщини шрифту на основі введених даних:

// Отримуємо елемент для відображення введеного тексту
let outputElement = document.getElementById('output');

// Функція для оновлення товщини шрифту
function updateFontWeight(inputText) {
  // Якщо довжина тексту більше 10 символів, встановлюємо fontWeight на 700 (жирний)
  if (inputText.length > 10) {
    outputElement.style.fontWeight = '700';
  } else {
    // Інакше встановлюємо fontWeight на 400 (звичайний)
    outputElement.style.fontWeight = '400';
  }
  // Встановлюємо введений текст у елемент
  outputElement.textContent = inputText;
}

// Імітуємо введення даних користувачем
let userInput = "Приклад тексту";
updateFontWeight(userInput);

У цьому прикладі ми динамічно змінюємо товщину шрифту елемента на основі довжини введеного тексту. Якщо текст довший за 10 символів, шрифт стає жирним (fontWeight = 700), інакше - звичайним (fontWeight = 400). Такий підхід дозволяє зробити інтерфейс більш інтерактивним та інформативним для користувача.

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

правити

Порада

При створенні адаптивних дизайнів, змінюйте font-weight в залежності від розміру екрану або інших умов. Це допоможе зберегти читабельність тексту на різних пристроях:

if (window.innerWidth < 600) {
  element.style.fontWeight = '400';
} else {
  element.style.fontWeight = '700';
}

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

Порада

Пам'ятайте, що різні шрифти можуть по-різному відображати ті самі значення font-weight. Переконайтеся, що обраний шрифт підтримує необхідні значення товщини для досягнення бажаного результату:

element.style.fontFamily = 'Arial, sans-serif';
element.style.fontWeight = '700';

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

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

Синтаксис

element.style.fontWeight

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

<div class="message">перший елемент message</div>
<div class="message">другий елемент message</div>

// Отримуємо елементи повідомлень
let messages = document.querySelectorAll('.message');

// Проходимо по кожному елементу повідомлення
messages.forEach(message => {
  // Перевіряємо, чи має повідомлення клас 'important'
  if (message.classList.contains('important')) {
    // Змінюємо властивість fontWeight на bold
    message.style.fontWeight = 'bold';
  } else {
    // Змінюємо властивість fontWeight на normal
    message.style.fontWeight = 'normal';
  }
});

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

// Отримуємо елемент, який буде відображати текст
let timeElement = document.getElementById('timeBasedText');

// Функція для оновлення товщини шрифту на основі часу доби
function updateFontWeightBasedOnTime() {
  // Отримуємо поточний час
  let currentHour = new Date().getHours();

  // Змінюємо товщину шрифту залежно від часу доби
  if (currentHour >= 6 && currentHour < 18) {
    // Встановлюємо fontWeight на 300 (тонкий) в денний час
    timeElement.style.fontWeight = '300';
  } else {
    // Встановлюємо fontWeight на 700 (жирний) у вечірній та нічний час
    timeElement.style.fontWeight = '700';
  }
}

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

// Оновлюємо товщину шрифту щогодини
setInterval(updateFontWeightBasedOnTime, 3600000);