style.textDecorationプロパティ

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>

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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク