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

JavaScriptでテキスト装飾（text-decoration）の線の種類を設定する方法

テキスト装飾（text-decoration）における線の種類を設定するには、textDecorationLine プロパティを使用します。このプロパティを使うことで、下線（underline）、上線（overline）、取り消し線（line-through）など、さまざまな装飾ラインをJavaScriptから動的に指定できます。

以下のサンプルコードでは、ボタンをクリックすると、テキストに赤色の上線（overline）が適用されます。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <div id = "myText" style = "text-decoration: underline;">
         This is demo text.
      </div>
      <br>
      <button onclick="display()"> Set Text Decoration </button>
      <script>
         function display() {
            document.getElementById("myText").style.textDecorationColor = "red";
            document.getElementById("myText").style.textDecorationLine = "overline";
         }
      </script>
   </body>
</html>

コードの解説

  • textDecorationLine：装飾線の種類を設定します。「underline」「overline」「line-through」などの値が指定可能です。
  • textDecorationColor：装飾線の色を設定します。上記の例では「red」を指定しています。

ボタンをクリックすると display() 関数が実行され、デモテキストの装飾が下線から赤い上線へと変更されます。このように、CSSの text-decoration-line プロパティに対応するJavaScriptのスタイルオブジェクトを操作することで、ページ表示後に動的にテキスト装飾を制御できます。

  1. JavaScriptでリストアイテムのマーカータイプを設定する方法

    リスト項目のマーカー（先頭に表示される記号）の種類を設定するには、JavaScriptの listStyleType プロパティを使用します。このプロパティを使うことで、「四角（square）」「丸（circle）」「黒丸（disc）」など、さまざまなマーカータイプに動的に変更できます。 listStyleTypeプロパティとは listStyleType はCSSの list-style-type プロパティに対応するJavaScriptのスタイルプロパティです。主な値には以下のようなものがあります。 disc … 黒丸（デフォルト） circle … 白抜きの丸 square … 四角

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

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