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 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачам взаємодіяти з текстом на сторінці за допомогою випадаючого списку, вибираючи різні варіанти вирівнювання (left, center, right, justify). Це показує, як легко можна змінювати стиль тексту динамічно за допомогою властивості element.style.textAlign, роблячи веб-сторінки більш інтерактивними та зручними для користувачів.
У цьому прикладі користувач може вводити значення вирівнювання (left, right, center або justify) у текстове поле, і текст у параграфі буде динамічно змінювати своє вирівнювання відповідно до введеного значення. Це дозволяє користувачам взаємодіяти з текстом на сторінці та бачити, як різні значення textAlign впливають на його вигляд.
// Створюємо елемент 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;
}
});
У цьому прикладі ми створюємо таблицю, де кожна клітинка змінює своє вирівнювання тексту при кожному кліку. Вирівнювання циклічно змінюється між left, center, right та justify. Це дозволяє користувачам легко бачити різні стилі вирівнювання та експериментувати з ними в реальному часі, що може бути корисним для інтерактивних демонстрацій або навчальних інструментів.
// Створюємо елемент таблиці
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;
}
});