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

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

Порада:

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

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

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

Порада:

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

element.classList.add('uppercase');

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

.uppercase {
    text-transform: uppercase;
}

Синтаксис

element.style.textTransform

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwzpNVq">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади