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

JavaScriptでテキスト装飾の線スタイル（textDecorationStyle）を設定する方法

JavaScriptでテキスト装飾の線のスタイルを設定するには、textDecorationStyleプロパティを使用します。このプロパティにより、下線（solid）、二重線（double）、点線（dotted）、破線（dashed）、波線（wavy）など、さまざまな線のスタイルを自由に指定できます。

textDecorationStyleプロパティの使い方

textDecorationStyleプロパティは、CSSのtext-decoration-styleに相当し、要素のstyleオブジェクト経由でJavaScriptから動的に変更できます。あらかじめHTML側で「text-decoration: underline;」のように下線を設定しておき、その線の見た目を後から切り替えるといった使い方が一般的です。

サンプルコード

以下のコードは、JavaScriptでテキスト装飾の線スタイルを変更する例です。ボタンをクリックすると、装飾線の色が赤に変わり、二重下線（double）が適用されます。

<!DOCTYPE html>
<html>
   <body>
      <div id = "myText" style = "text-decoration: underline;">
         これはデモ用のテキストです。
      </div>
      <br>
      <button onclick = "display()"> テキスト装飾を設定する </button>
      <script>
         function display() {
            document.getElementById("myText").style.textDecorationColor = "red";
            document.getElementById("myText").style.textDecorationStyle = "double";
         }
      </script>
   </body>
</html>

コードの解説

  • textDecorationColor：装飾線の色を指定します。この例では「red」が設定されます。
  • textDecorationStyle：装飾線のスタイルを指定します。「double」を設定することで、一本の下線が二重線に変わります。

このように、textDecorationStyleプロパティを活用すれば、ユーザーの操作に応じてテキスト装飾を動的に変化させるインタラクティブなページを簡単に作成できます。

  1. JavaScriptでテキストの行間を設定する方法

    テキストの行間（行と行の距離）を設定するには、lineHeightプロパティを使用します。このプロパティは、要素内の各行の高さを制御し、値を大きくするほど行間が広がります。JavaScriptから操作する場合は、document.getElementById()などで対象の要素を取得し、style.lineHeightに値を代入します。値には数値（フォントサイズに対する倍率）のほか、「px」や「%」などの単位も指定できます。以下のサンプルコードを実行して、JavaScriptでテキストの行間を設定する方法を確認してみましょう。サンプルコード<!DOCTYPE html> <h

  2. JavaScriptでテキストの文字間隔（レタースペーシング）を設定する方法

    文字間隔の設定には「letterSpacing」プロパティを使うJavaScriptでテキストの文字と文字の間隔を調整するには、styleオブジェクトのletterSpacingプロパティを使用します。このプロパティはCSSのletter-spacingに対応しており、「px」や「em」、「pt」などの長さの単位で文字間のスペースを自由に指定できます。値には正の数値を指定すれば文字間が広くなり、負の数値を指定すれば狭くなります。また、「normal」を設定すればデフォルトの間隔に戻すことも可能です。サンプルコード以下のコードでは、ボタンをクリックするとdisplay()関数が呼び出され、idが