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

JavaScriptでテキスト装飾の色を設定する方法【textDecorationColor活用】

JavaScriptでテキスト装飾（下線や取り消し線など）の色を変更したい場合は、textDecorationColor プロパティを使用します。このプロパティを使うことで、CSSを直接編集することなく、動的にテキスト装飾の色を制御できます。

textDecorationColorプロパティとは

textDecorationColor は、テキストに適用された装飾線（下線・上線・取り消し線など）の色を指定するためのプロパティです。単独で使用する場合は、あらかじめ textDecoration プロパティで「underline」などの装飾スタイルを設定しておく必要があります。装飾が設定されていない状態では、色を指定しても画面上には何も変化が現れません。

実装例

以下のコードでは、ボタンをクリックするとテキストに赤色の下線が引かれます。display() 関数内で、まず textDecoration プロパティによって下線を有効にし、続いて textDecorationColor プロパティでその下線の色を「red」に設定しています。

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

コードのポイント

・document.getElementById() で対象となる要素を取得し、その style オブジェクト経由でプロパティを操作します。
・textDecoration = "underline" により下線を表示させます。
・textDecorationColor = "red" により、下線の色を赤色に変更します。色の値は、「blue」「#ff0000」「rgb(255,0,0)」など、CSSで利用可能な形式で指定できます。

このように、JavaScriptの textDecorationColor プロパティを活用すれば、ユーザーの操作に応じてテキスト装飾の色を柔軟に切り替えることが可能です。ハイライト表示や強調演出など、インタラクティブなWebページ制作にぜひ活用してください。

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

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

  2. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP