JS властивість CSSStyleDeclaration.textIndent
Загальний опис
element.style.textIndent – це властивість JavaScript, яка дозволяє встановлювати або отримувати величину відступу першого рядка тексту всередині елемента.
Ця властивість дуже корисна для форматування текстового контенту на веб-сторінці, дозволяючи контролювати, як текст буде відображатися у браузері. Значення textIndent може бути задано у різних одиницях виміру, таких як пікселі (px), відсотки (%), ем (em) тощо.
Щоб встановити відступ для першого рядка тексту елемента, потрібно звернутися до властивості style цього елемента і задати значення textIndent. Це можна зробити за допомогою наступного коду:
let element = document.getElementById('myElement');
element.style.textIndent = '20px';
У цьому прикладі елемент з ідентифікатором myElement отримає відступ першого рядка тексту на 20 пікселів.
Якщо ви хочете встановити відступ у відсотках від ширини контейнера, це можна зробити наступним чином:
element.style.textIndent = '5%';
Тепер перший рядок тексту буде відступати на 5% від ширини батьківського елемента.
Отримання значення textIndent
Щоб отримати поточне значення textIndent для певного елемента, ви можете просто звернутися до цієї властивості:
let currentIndent = element.style.textIndent;
console.log(currentIndent);
Цей код виведе поточне значення відступу першого рядка тексту у консолі.
Динамічна зміна відступу
Властивість textIndent може бути використана для динамічної зміни відступу у відповідь на дії користувача. Наприклад, ви можете змінювати відступ першого рядка тексту при натисканні кнопки:
let button = document.getElementById('changeIndentButton');
button.addEventListener('click', function() {
element.style.textIndent = '30px';
});
У цьому прикладі натискання кнопки з ідентифікатором changeIndentButton змінить відступ першого рядка тексту у елементі на 30 пікселів.
Таким чином, element.style.textIndent є важливою властивістю для керування зовнішнім виглядом тексту на веб-сторінці, дозволяючи розробникам створювати більш привабливий і зручний для читання текстовий контент.
| Нотатка: | Варто зазначити, що значенням за замовчуванням для |
| Порада: | Щоб зробити відступи більш помітними або стилізованими, можна комбінувати |
| Порада: | Використання одиниць виміру |
Синтаксис
element.style.textIndentЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей код дозволяє користувачам налаштовувати відступ першого рядка тексту за допомогою повзунка. Початкове значення встановлюється при завантаженні сторінки, і значення відступу автоматично оновлюється в міру переміщення повзунка. Це надає користувачам можливість наочно побачити, як змінюється відступ першого рядка тексту в реальному часі.
У цьому прикладі відступ першого рядка тексту в елементі динамічно змінюється залежно від ширини вікна браузера. Це корисно для адаптивного дизайну, де необхідно забезпечити гармонійне відображення тексту на різних пристроях з різними розмірами екранів.
window.addEventListener('resize', function() {
let element = document.getElementById('responsiveElement');
let windowWidth = window.innerWidth;
if (windowWidth < 600) {
element.style.textIndent = '10px';
} else if (windowWidth < 900) {
element.style.textIndent = '20px';
} else {
element.style.textIndent = '30px';
}
});
У цьому прикладі відступ першого рядка тексту встановлюється залежно від вмісту тексту елемента. Текст, який починається з "Warning:", отримає більший відступ і червоний колір, тоді як текст з "Note:" – середній відступ і синій колір. Це корисно для візуального розрізнення різних типів повідомлень або контенту на сторінці, роблячи їх більш помітними для користувачів.
function setTextIndentBasedOnContent(element) {
let textContent = element.textContent;
if (textContent.startsWith('Warning:')) {
element.style.textIndent = '50px';
element.style.color = 'red';
} else if (textContent.startsWith('Note:')) {
element.style.textIndent = '30px';
element.style.color = 'blue';
} else {
element.style.textIndent = '10px';
element.style.color = 'black';
}
}
let elements = document.querySelectorAll('.message');
elements.forEach(function(element) {
setTextIndentBasedOnContent(element);
});