値の部分強調

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、項目の値の一部文字の色を変更する方法をご案内します。
本機能は「表示項目」に対してのみ有効であり、「更新項目」（テキストボックスなどの入力フィールド）には適用できません。

2. サンプル機能の内容と確認ポイント

「ブロック設定＞項目情報＞更新」チェックボックスが無効に設定されている項目は、実行画面において表示項目として扱われます。

本記事では、表示項目の値のうち、特定の文字のみの色を変更する方法について説明します。

はじめに、明細ブロックの「ブロック設定画面 >項目情報>STYLE CLASS」において、「色を変更する対象のテキスト」「テキスト」「色」それぞれにクラス名を指定します。
これにより、後続の Client-side JavaScript で、各要素をセレクタとして指定できるようになります。

Client-side JavaScript による実装内容は以下のとおりです。

resizeContents_end 関数内で、明細ブロックの tr 要素をすべて取得し、forEach 等を用いて順に処理します。
各 tr 要素内では、以下の手順で処理を行います。

1. 「ブロック設定 ＞ 項目情報 ＞ STYLE CLASS」にて指定されたクラス名を基に、「色を変更する対象のテキスト」「テキスト」「色」の各要素を取得します。

2. それぞれの要素内にある div 要素から表示内容を取得します。

3. 「テキスト」の表示内容に「色を変更する対象のテキスト」が含まれている場合は、その部分の文字色を「色」で指定された内容に変更します。
4. 変更後の内容を、対象の div 要素に innerHTML を用いて反映します。

🔍 確認いただけるポイント

• 表示項目「テキスト」に「色を変更する対象のテキスト」が含まれている場合、該当文字の色が指定どおりに変更されていること。

3. 画面イメージ

以下は、「テキスト」内の「色を変更する対象のテキスト」部分の色が変更されている状態を示しています。

!++++

使用したコード一覧

!----