style.textDecorationは、要素のスタイル属性のtext-decorationプロパティの値を取得、もしくは、設定するプロパティ。
text-decorationプロパティは、テキストに、下線、上線、取消線を加えることができる。
構文
取得
var $textDecoration = $elementReference.style.textDecoration;
戻り値
要素のスタイル属性のtext-decorationプロパティの値。
設定
$elementReference.style.textDecoration = "none | underline | overline | line-through | inherit";
- none | underline | overline | line-through | inherit
- 下記の何れかの値で指定する。初期設定値は「none」。
- none：下線、上線、取消線を表示しない。
- underline：下線を表示。
- overline：上線を表示。
- line-through：取消線を表示。
- inherit：親要素の設定を継承。
複数設定
複数の線を表示させることもできる。
$elementReference.style.textDecoration = "underline overline line-through";
サンプル
サンプルのtext-decorationプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「text-decorationプロパティ」の値に設定する。設定値を「サンプルのtext-decorationプロパティの値：」の右横に表示する。「Sample Element / サンプル要素 」のテキストに、指定した線を加える。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setTextDecoration( $textDecoration ) {
var $element = document.getElementById( "sample" );
$element.style.textDecoration = $textDecoration;
var $textDecoration = $element.style.textDecoration;
document.getElementById( "sampleOutput" ).innerHTML = $textDecoration;
}
</script>
function setTextDecoration( $textDecoration ) {
var $element = document.getElementById( "sample" );
$element.style.textDecoration = $textDecoration;
var $textDecoration = $element.style.textDecoration;
document.getElementById( "sampleOutput" ).innerHTML = $textDecoration;
}
</script>
HTML
<button onclick="setTextDecoration('none');">none</button>
<button onclick="setTextDecoration('underline');">underline</button>
<button onclick="setTextDecoration('overline');">overline</button>
<button onclick="setTextDecoration('line-through');">line-through</button>
<button onclick="setTextDecoration('underline overline');">underline overline</button>
<button onclick="setTextDecoration('underline overline line-through');">underline overline line-through</button>
<button onclick="setTextDecoration('inherit');">inherit</button>
<br />
<p>サンプルのtext-decorationプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<button onclick="setTextDecoration('underline');">underline</button>
<button onclick="setTextDecoration('overline');">overline</button>
<button onclick="setTextDecoration('line-through');">line-through</button>
<button onclick="setTextDecoration('underline overline');">underline overline</button>
<button onclick="setTextDecoration('underline overline line-through');">underline overline line-through</button>
<button onclick="setTextDecoration('inherit');">inherit</button>
<br />
<p>サンプルのtext-decorationプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>