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

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

element.style.textTransform – це властивість JavaScript, яка дозволяє змінювати регістр тексту всередині HTML-елемента. Вона може бути використана для автоматичного перетворення тексту в верхній або нижній регістр, а також для капіталізації першої літери кожного слова.

Для використання textTransform необхідно задати одне з наступних значень:

• none: текст залишається без змін.
• capitalize: перетворює першу літеру кожного слова в тексті у верхній регістр.
• uppercase: перетворює весь текст у верхній регістр.
• lowercase: перетворює весь текст у нижній регістр.

Щоб застосувати ці значення, необхідно звернутися до властивості style елемента і задати відповідне значення textTransform. Наприклад, щоб перетворити текст у верхній регістр, використовується наступний код:

let element = document.getElementById('myElement');
element.style.textTransform = 'uppercase';

Цей код знайде елемент з ідентифікатором myElement і перетворить весь його текст у верхній регістр.

Щоб перетворити текст у нижній регістр, можна скористатися таким кодом:

element.style.textTransform = 'lowercase';

Цей код змінить весь текст елемента на нижній регістр.

Якщо потрібно капіталізувати перші літери кожного слова, використовується наступний код:

element.style.textTransform = 'capitalize';

Цей код зробить так, що кожне слово в тексті елемента починатиметься з великої літери.

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

Отримати поточне значення властивості textTransform можна за допомогою наступного коду:

let currentTransform = element.style.textTransform;
console.log(currentTransform);

Цей код виведе поточне значення властивості textTransform у консолі.

Ось приклад динамічної зміни регістру тексту при натисканні кнопки:

let button = document.getElementById('transformButton');
button.addEventListener('click', function() {
    if (element.style.textTransform === 'uppercase') {
        element.style.textTransform = 'lowercase';
    } else {
        element.style.textTransform = 'uppercase';
    }
});

У цьому прикладі текст елемента буде змінювати регістр з верхнього на нижній та навпаки при кожному натисканні кнопки з ідентифікатором transformButton.

Використання element.style.textTransform дозволяє легко керувати відображенням тексту на веб-сторінці, роблячи його більш читабельним та естетично привабливим без зміни вихідного тексту в HTML.

правити

Порада

Якщо потрібно застосувати різні стилі до різних частин тексту в одному елементі, можна комбінувати textTransform з методами маніпуляції з DOM. Наприклад, можна створити спан елементи для різних частин тексту і застосувати до них різні стилі:

let part1 = document.createElement('span');
part1.textContent = 'This is ';
part1.style.textTransform = 'none';

let part2 = document.createElement('span');
part2.textContent = 'IMPORTANT';
part2.style.textTransform = 'uppercase';

let part3 = document.createElement('span');
part3.textContent = ' text.';
part3.style.textTransform = 'none';

element.appendChild(part1);
element.appendChild(part2);
element.appendChild(part3);

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

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

Порада

Використання textTransform разом з іншими стилями може значно покращити читабельність тексту. Наприклад, перетворення тексту в верхній регістр може бути корисним для заголовків або ключових слів:

element.style.textTransform = 'uppercase';
element.style.fontWeight = 'bold';

Це зробить текст більш помітним і приверне увагу користувача.

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

Порада

Щоб забезпечити узгодженість стилю на всій сторінці, ви можете використовувати textTransform в комбінації з класами CSS. Наприклад, можна створити CSS-клас для верхнього регістру і застосовувати його до елементів за допомогою JavaScript:

element.classList.add('uppercase');

А в CSS визначити клас так:

.uppercase {
    text-transform: uppercase;
}

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

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

Синтаксис

element.style.textTransform

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let textElement = document.getElementById('autoTransformText');
let keywords = ['important', 'urgent', 'notice'];

function autoTransformText(element, keywords) {
    let text = element.textContent.toLowerCase();
    keywords.forEach(function(keyword) {
        if (text.includes(keyword)) {
            element.style.textTransform = 'uppercase';
            return;
        }
    });
}

autoTransformText(textElement, keywords);

<input type="text" id="userInput" value="текст для прикладу" placeholder="Введи щось">
<div id="displayText">Демонстраційний елемент</div>

let inputElement = document.getElementById('userInput');
let displayElement = document.getElementById('displayText');

inputElement.addEventListener('input', function() {
    let inputValue = inputElement.value;
    if (inputValue.length > 0) {
        displayElement.style.textTransform = 'uppercase';
    } else {
        displayElement.style.textTransform = 'none';
    }
    displayElement.textContent = inputValue;
});