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.

Синтаксис

element.style.textTransform

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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