HTML DOM スタイルの textTransform プロパティとは？使い方を解説
DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。
構文
textTransform プロパティの基本的な構文は以下のとおりです。
値の取得（Returning textTransform）
object.style.textTransform
値の設定（Modifying textTransform）
object.style.textTransform = "value";
設定できる値
value には以下のいずれかの値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値（初期値）に設定します。 |
| none | テキストに一切の変換を適用しません。 |
| uppercase | すべての文字を大文字に変換します。 |
| lowercase | すべての文字を小文字に変換します。 |
| capitalize | すべての単語の先頭文字を大文字に変換します。 |
サンプルコード
ここでは、style の textTransform プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、段落のテキストがすべて大文字に変換される仕組みです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textTransform プロパティの例</h1>
<p>こんにちは！これはダミーテキストを含む段落要素です。</p>
<button onclick="add()" class="btn">textTransform を変更</button>
<script>
function add() {
document.querySelector('p').style.textTransform = "uppercase";
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「textTransform を変更」ボタンをクリックすると、段落のテキストに対して大文字への変換が適用され、以下のように表示が変わります。
このように、textTransform プロパティを使えば、CSS を直接書き換えることなく、JavaScript だけでテキストの大文字・小文字の表示形式を動的に制御することができます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri