style.textTransformは、要素のスタイル属性のtext-transformプロパティの値を取得、もしくは、設定するプロパティ。
text-transformプロパティは、大文字小文字変換方法を指定することができる。
構文
取得
var $textTransform = $elementReference.style.textTransform;
戻り値
要素のスタイル属性のtext-transformプロパティの値。
設定
$elementReference.style.textTransform = "none | capitalize | uppercase | lowercase | inherit";
- none | capitalize | uppercase | lowercase | inherit
- 下記の何れかの値で指定する。初期設定値は「none」。
- none：大文字小文字変換しない。記述通りに表示する。
- capitalize：単語の先頭の文字だけ大文字に変換し表示。単語の先頭文字以外は大文字小文字変換せず、そのまま表示する。
- uppercase：全ての文字を大文字に変換し表示。
- lowercase：全ての文字を小文字に変換し表示。
- inherit：親要素の設定を継承。
サンプル
サンプルのtext-transformプロパティの値：
This is the sample.
サンプルの動作について
- 「none」ボタンをクリックすると、「This is the sample.」をそのまま表示。「サンプルのtext-transformプロパティの値：」の右横に「none」と表示。
- 「capitalize」ボタンをクリックすると、「This Is The Sample.」のように単語の先頭の文字だけ大文字で表示する。「サンプルのtext-transformプロパティの値：」の右横に「capitalize」と表示。
- 「uppercase」ボタンをクリックすると、「THIS IS THE SAMPLE.」のように全ての文字を大文字で表示する。「サンプルのtext-transformプロパティの値：」の右横に「uppercase」と表示。
- 「lowercase」ボタンをクリックすると、「this is the sample.」のように全ての文字を小文字で表示する。「サンプルのtext-transformプロパティの値：」の右横に「lowercase」と表示。
- 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのtext-transformプロパティの値：」の右横に「inherit」と表示。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setTextTransform( $textTransform ) {
var $element = document.getElementById( "sample" );
$element.style.textTransform = $textTransform;
var $textTransform = $element.style.textTransform;
document.getElementById( "sampleOutput" ).innerHTML = $textTransform;
}
</script>
function setTextTransform( $textTransform ) {
var $element = document.getElementById( "sample" );
$element.style.textTransform = $textTransform;
var $textTransform = $element.style.textTransform;
document.getElementById( "sampleOutput" ).innerHTML = $textTransform;
}
</script>
HTML
<button onclick="setTextTransform('none');">none</button>
<button onclick="setTextTransform('capitalize');">capitalize</button>
<button onclick="setTextTransform('uppercase');">uppercase</button>
<button onclick="setTextTransform('lowercase');">lowercase</button>
<button onclick="setTextTransform('inherit');">inherit</button>
<br />
<p>サンプルのtext-transformプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
This is the sample.
</div>
<button onclick="setTextTransform('capitalize');">capitalize</button>
<button onclick="setTextTransform('uppercase');">uppercase</button>
<button onclick="setTextTransform('lowercase');">lowercase</button>
<button onclick="setTextTransform('inherit');">inherit</button>
<br />
<p>サンプルのtext-transformプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
This is the sample.
</div>