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 є важливою властивістю для керування зовнішнім виглядом тексту на веб-сторінці, дозволяючи розробникам створювати більш привабливий і зручний для читання текстовий контент.

правити

Порада

Щоб зробити відступи більш помітними або стилізованими, можна комбінувати textIndent з іншими CSS властивостями, такими як line-height. Наприклад, збільшення відстані між рядками може зробити відступ більш виразним: element.style.lineHeight = '1.5'; element.style.textIndent = '30px';.

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

Порада

Використання одиниць виміру em для textIndent дозволяє створити відступи, що залежать від розміру шрифту елемента. Це корисно для забезпечення консистентного відображення тексту незалежно від поточного розміру шрифту. Наприклад, встановлення відступу в 2 em зробить відступ, рівний подвійному розміру шрифту елемента: element.style.textIndent = '2em';.

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

Нотатка

Варто зазначити, що значенням за замовчуванням для textIndent є 0, тобто без відступу. Якщо ви не встановлюєте жодного значення, текст відображатиметься з нульовим відступом першого рядка.

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

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

Синтаксис

element.style.textIndent

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

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

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';
    }
});

<div class="message">перший елемент message</div>
<div class="message">другий елемент message</div>

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);
});