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

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

element.style.letterSpacing – це властивість об'єкта HTMLElement, яка дозволяє керувати міжлітерним інтервалом (відстанню між символами) всередині текстового вмісту елемента. Значення цієї властивості встановлюється у вигляді рядка, що містить числове значення разом з одиницями вимірювання (наприклад, "2px", "0.1em", "%").

Використання властивості element.style.letterSpacing може бути необхідним для досягнення певних дизайнерських рішень або покращення читабельності тексту. Значення властивості можуть бути як позитивними, що збільшують відстань між символами, так і негативними, що зменшують її.

Розглянемо простий приклад, де ми встановлюємо міжлітерний інтервал для елемента:

// Отримуємо елемент за допомогою його id
let element = document.getElementById('myTextElement');

// Встановлюємо нове значення властивості letterSpacing
element.style.letterSpacing = '2px';

Цей код збільшує відстань між символами всередині елемента з ідентифікатором myTextElement на 2 пікселі.

Динамічна зміна міжлітерного інтервалу

Приклад з динамічною зміною міжлітерного інтервалу при кліку на кнопку:

let button = document.getElementById('changeSpacingButton');
let element = document.getElementById('myTextElement');

button.addEventListener('click', function() {
    // Отримуємо поточне значення letterSpacing і перетворюємо його на число
    let currentSpacing = parseFloat(element.style.letterSpacing) || 0;
    
    // Збільшуємо поточне значення на 0.5 пікселів
    element.style.letterSpacing = (currentSpacing + 0.5) + 'px';
});

Цей код додає обробник події для кнопки, який при кожному кліку збільшує міжлітерний інтервал елемента myTextElement на 0.5 пікселів.

Отримання поточного значення letterSpacing

Для отримання поточного значення властивості letterSpacing можна скористатися таким кодом:

let currentSpacing = element.style.letterSpacing;
console.log('Поточне значення letterSpacing: ', currentSpacing);

Висновок

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

правити

Нотатка

Властивість element.style.letterSpacing працює з будь-якими текстовими елементами, такими як div, span, p, тощо.

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

Нотатка

Значення властивості letterSpacing повинно містити одиниці вимірювання, такі як px, em, % тощо. Без вказання одиниць вимірювання зміна міжлітерного інтервалу не відбудеться.

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

Нотатка

Якщо значення letterSpacing не було раніше встановлене, його значення буде порожнім рядком.

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

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

Синтаксис

element.style.letterSpacing

Переглядачі

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

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

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

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

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

Приклади

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

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

let textElement = document.getElementById('animatedText');
let spacing = 0;

function animateLetterSpacing() {
  spacing += 0.5;
  textElement.style.letterSpacing = spacing + 'px';
  if (spacing < 20) {
    requestAnimationFrame(animateLetterSpacing);
  }
}

textElement.addEventListener('mouseover', function() {
  spacing = 0;
  animateLetterSpacing();
});

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

document.getElementById('letterSpacingSlider').addEventListener('input', function(event) {
  let spacingValue = event.target.value + 'px';
  document.getElementById('textElement').style.letterSpacing = spacingValue;
});