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

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

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

Для використання цієї властивості в JavaScript, спочатку потрібно отримати доступ до елемента в DOM (Document Object Model). Після цього можна встановити або змінити значення textAlign за допомогою властивості style.

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

// Отримуємо елемент з DOM
let paragraph = document.querySelector('p');

// Встановлюємо вирівнювання тексту по центру
paragraph.style.textAlign = 'center';

У цьому прикладі ми отримуємо елемент p (параграф) і встановлюємо вирівнювання тексту по центру. Це призведе до того, що весь текст всередині цього параграфа буде вирівняний по центру.

Приклад вирівнювання тексту по правому краю

// Отримуємо елемент з DOM
let header = document.querySelector('h1');

// Встановлюємо вирівнювання тексту по правому краю
header.style.textAlign = 'right';

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

Приклад вирівнювання тексту з вирівнюванням по ширині

// Отримуємо елемент з DOM
let divElement = document.querySelector('div');

// Встановлюємо вирівнювання тексту по ширині
divElement.style.textAlign = 'justify';

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

Динамічна зміна вирівнювання тексту

// Отримуємо елемент з DOM
let button = document.querySelector('button');

// Додаємо обробник події для зміни вирівнювання тексту
button.addEventListener('click', function() {
  let paragraph = document.querySelector('p');
  paragraph.style.textAlign = 'left'; // Вирівнювання по лівому краю
});

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

Таким чином, element.style.textAlign є потужною властивістю для управління відображенням тексту на веб-сторінках, дозволяючи легко змінювати вирівнювання тексту за допомогою JavaScript.

Синтаксис

element.style.textAlign

Значення

Return

Переглядачі

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

Приклади

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

// Створюємо елемент input для вибору вирівнювання
let inputAlign = document.createElement('input');
inputAlign.setAttribute('type', 'text');
inputAlign.setAttribute('placeholder', 'Введіть left, right, center або justify');
document.body.appendChild(inputAlign);

// Створюємо елемент p для демонстрації вирівнювання тексту
let paragraph = document.createElement('p');
paragraph.textContent = 'Це приклад тексту, який буде динамічно вирівнюватися.';
document.body.appendChild(paragraph);

// Додаємо обробник події для зміни вирівнювання тексту
inputAlign.addEventListener('input', function() {
  let alignment = inputAlign.value;
  if (['left', 'right', 'center', 'justify'].includes(alignment)) {
    paragraph.style.textAlign = alignment;
  }
});

// Створюємо елемент таблиці
let table = document.createElement('table');
for (let i = 0; i < 3; i++) {
  let row = table.insertRow();
  for (let j = 0; j < 3; j++) {
    let cell = row.insertCell();
    cell.textContent = `Рядок ${i + 1}, Клітинка ${j + 1}`;
    cell.style.border = '1px solid black';
    cell.style.padding = '10px';
    cell.style.cursor = 'pointer';
  }
}
document.body.appendChild(table);

// Додаємо обробник події для зміни вирівнювання тексту в клітинках таблиці
table.addEventListener('click', function(event) {
  let cell = event.target;
  if (cell.tagName.toLowerCase() === 'td') {
    let currentAlign = cell.style.textAlign;
    let newAlign;
    switch (currentAlign) {
      case 'left':
        newAlign = 'center';
        break;
      case 'center':
        newAlign = 'right';
        break;
      case 'right':
        newAlign = 'justify';
        break;
      default:
        newAlign = 'left';
    }
    cell.style.textAlign = newAlign;
  }
});