style.textIndentは、要素のスタイル属性のtext-indentプロパティの値を取得、もしくは、設定するプロパティ。
text-indentプロパティは、ブロック内のテキストの最初の行のインデントを指定することができる。
構文
取得
var $textIndent = $elementReference.style.textIndent;
戻り値
要素のスタイル属性のtext-indentプロパティの値。
設定
$elementReference.style.textIndent = "length | percentage | inherit";
- length | percentage | inherit
- 下記の何れかの方法で指定する。初期設定値は「0」。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- percentage：「%」や「em」を付けた割合で指定。基準は親要素の幅（widthプロパティ）。
- inherit：親要素の設定を継承。
サンプル
サンプル要素のtext-indentプロパティの値：
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよらりるれろわをん
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを、背景色が黄色のサンプル要素の「text-indentプロパティ」の値に設定する。設定値を「サンプル要素のtext-indentプロパティの値：」の右横に表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setTextIndent( $textIndent ) {
var $element = document.getElementById( "sample" );
$element.style.textIndent = $textIndent;
var $textIndent = $element.style.textIndent;
document.getElementById( "sampleOutput" ).innerHTML = $textIndent;
}
</script>
function setTextIndent( $textIndent ) {
var $element = document.getElementById( "sample" );
$element.style.textIndent = $textIndent;
var $textIndent = $element.style.textIndent;
document.getElementById( "sampleOutput" ).innerHTML = $textIndent;
}
</script>
HTML
<button onclick="setTextIndent('0');">0</button>
<button onclick="setTextIndent('10px');">10px</button>
<button onclick="setTextIndent('10pt');">10pt</button>
<button onclick="setTextIndent('1em');">1em</button>
<button onclick="setTextIndent('2em');">2em</button>
<button onclick="setTextIndent('10%');">10%</button>
<button onclick="setTextIndent('inherit');">inherit</button>
<br />
<p>サンプル要素のtext-indentプロパティの値：<span id="sampleOutput"></span></p>
<div style="width: 300px; font-size: 16px; border: 1px solid red; background-color: yellow;">
<p id="sample">
あいうえおかきくけこさしすせそたちつてとなにぬねの
<br />
はひふへほまみむめもやゆよらりるれろわをん
</p>
</div>
<button onclick="setTextIndent('10px');">10px</button>
<button onclick="setTextIndent('10pt');">10pt</button>
<button onclick="setTextIndent('1em');">1em</button>
<button onclick="setTextIndent('2em');">2em</button>
<button onclick="setTextIndent('10%');">10%</button>
<button onclick="setTextIndent('inherit');">inherit</button>
<br />
<p>サンプル要素のtext-indentプロパティの値：<span id="sampleOutput"></span></p>
<div style="width: 300px; font-size: 16px; border: 1px solid red; background-color: yellow;">
<p id="sample">
あいうえおかきくけこさしすせそたちつてとなにぬねの
<br />
はひふへほまみむめもやゆよらりるれろわをん
</p>
</div>