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

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

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

Властивість wordSpacing може приймати різні значення: довільні одиниці виміру (наприклад, px, em, %), ключове слово normal (за замовчуванням) або inherit (успадковує значення від батьківського елемента). Значення в пікселях дозволяють точно контролювати відстань між словами, тоді як відносні одиниці (em, %) дозволяють створювати адаптивні макети, що підлаштовуються під розмір шрифту або контейнера.

Приклад 1: Встановлення проміжку між словами в пікселях. Це корисно для точного налаштування відстані між словами.

var element = document.getElementById('myElement');
element.style.wordSpacing = '10px';

У цьому прикладі елемент з id myElement матиме відстань між словами, встановлену на 10 пікселів.

Приклад 2: Використання відносних одиниць виміру для створення адаптивного макета. Це корисно, коли потрібно, щоб проміжок між словами підлаштовувався під розмір шрифту.

var element = document.getElementById('adaptiveElement');
element.style.wordSpacing = '0.5em';

У цьому прикладі відстань між словами встановлюється на 0.5em, що еквівалентно половині розміру шрифту елемента.

Приклад 3: Використання ключового слова inherit для успадкування значення від батьківського елемента. Це корисно для забезпечення консистентності стилю в різних частинах документа.

var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');

parentElement.style.wordSpacing = '15px';
childElement.style.wordSpacing = 'inherit';

У цьому прикладі дочірній елемент успадковує значення властивості wordSpacing від батьківського елемента, що встановлено на 15 пікселів.

Приклад 4: Динамічне змінення проміжку між словами на основі подій користувача. Це корисно для створення інтерактивних інтерфейсів, де користувач може змінювати вигляд тексту.

var element = document.getElementById('dynamicElement');
var button = document.getElementById('increaseSpacingButton');

button.addEventListener('click', function() {
  var currentSpacing = parseFloat(window.getComputedStyle(element).wordSpacing);
  element.style.wordSpacing = (currentSpacing + 5) + 'px';
});

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

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

Синтаксис

element.style.wordSpacing

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

var textElement = document.getElementById('dynamicSpacingText');

function updateWordSpacing() {
  var currentHour = new Date().getHours();
  
  if (currentHour < 12) {
    textElement.style.wordSpacing = '2px';
  } else if (currentHour < 18) {
    textElement.style.wordSpacing = '5px';
  } else {
    textElement.style.wordSpacing = '8px';
  }
}

// Виклик функції при завантаженні сторінки
updateWordSpacing();

var textElement = document.getElementById('sliderText');
var spacingSlider = document.getElementById('spacingSlider');

spacingSlider.addEventListener('input', function() {
  var newSpacing = spacingSlider.value + 'px';
  textElement.style.wordSpacing = newSpacing;
});