JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストの装飾（textDecoration）を設定する方法を解説

JavaScriptでテキストに装飾を加えたい場合は、textDecorationプロパティを使用します。このプロパティを使うことで、テキストに下線を引いたり、取り消し線を付けたりといった装飾を動的に設定できます。

textDecorationプロパティとは

textDecorationはCSSの「text-decoration」プロパティに対応するJavaScriptのスタイルプロパティです。設定できる主な値は以下のとおりです。

  • underline：テキストに下線を引く
  • overline：テキストの上に線を引く
  • line-through：テキストに取り消し線を付ける
  • none：装飾を解除する

実装例

ボタンをクリックすると、指定したテキストに下線が引かれるサンプルコードです。ぜひ実際に動かして確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <div id = "myText">これはデモ用のテキストです。</div><br>

      <button onclick = "display()">テキスト装飾を設定</button>
      <script>
         function display() {
            document.getElementById("myText").style.textDecoration = "underline";
         }
      </script>
   </body>
</html>

コードの解説

このコードのポイントは次の2点です。

  1. getElementByIdメソッドで、id属性が「myText」の要素を取得します。
  2. 取得した要素のstyle.textDecorationに「underline」を代入することで、テキストに下線が適用されます。

他の装飾値への変更

例えば、取り消し線を付けたい場合は、値を「line-through」に変更するだけで対応できます。

document.getElementById("myText").style.textDecoration = "line-through";

このように、JavaScriptのtextDecorationプロパティを使えば、ユーザーの操作に応じてテキストの見た目を柔軟に変更できます。ボタン操作やイベント処理と組み合わせることで、よりインタラクティブなWebページを作成できます。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>