[JavaScript] 文字に下線/上線/取消し線を引く

投稿日：2016年11月2日更新日：2018年4月28日

JavaScriptで文字に下線/上線/取消し線を引くには、style.textDecorationを使用します。

サンプルソース

例）ボタンを押すごとにid="target"要素の下線あり/なしを切り替える

function changeUnderline(idname){
  var obj = document.getElementById(idname);
  if(obj.style.textDecoration == "underline"){
    obj.style.textDecoration = "none";
  }else{
    obj.style.textDecoration = "underline";
  }
}

function changeUnderline(idname){

var obj = document.getElementById(idname);

if(obj.style.textDecoration == "underline"){

obj.style.textDecoration = "none";

}else{

obj.style.textDecoration = "underline";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <p id="target">あいうえお</p>
  <input type="button" value="ボタン" onclick="changeUnderline('target');" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p id="target">あいうえお</p>

</body>

</html>

実行サンプル

ボタンを押すと、下線/普通が切り替わります。

あいうえお

解説

上線や取消線などを指定したい場合は、以下の値に変更してください。

【style.textDecorationの値】
値	意味	サンプル
none	装飾なし	あいうえお
underline	下線	あいうえお
overline	上線	あいうえお
underline overline	上下線	あいうえお
line-through	取り消し線	あいうえお
underline overline line-through	上下線＋取り消し線	あいうえお

執筆者：とら