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.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.textAlign

Переглядачі

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

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

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

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

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

Приклади

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

// Створюємо елемент 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;
  }
});