JavaScript を使用して、入力ボックスに入力した後に枠線を変更するにはどうすればよいですか?

style.border プロパティは要素の境界線を変更するために使用され、要素の 3 つの border-bottom プロパティ、つまり border-color、border を返します。 -スタイルとボーダーの幅。これは、HTML スタイル オブジェクトのプロパティの 1 つです。

onchange イベントを使用して、ボックスに入力した後に変更を有効にします。 onchange は、HTML 要素の値が変更されたときに発生する JavaScript 属性の 1 つです。選択された状態が変化したときは、ラジオ ボタンやチェックボックスでも機能します。

onchange イベントは、 HTML 要素でも使用できます。 onchange イベントは、oninput イベントと非常に似ています。ただし、oninput イベントは要素の値が変更された直後に発生しますが、onchange イベントは要素がフォーカスを失ったときに発生します。

この記事では、JavaScript を使用して入力ボックスの境界線を入力した後に変更する方法を学びます。

＃＃＃文法＃＃＃

以下は、style.border プロパティの構文です。このプロパティは、ボックスに入力した後に入力ボックスの境界線を変更するために使用されます -

リーリー

パラメータ

width – 境界線の幅を設定するために使用されます。幅の値は、Thick、Thin、Medium、または px 単位の値 (つまり 10px) として渡すことができます。
style – 境界線のスタイルを設定するために使用されます。スタイル値を「solid」、「dotted」、「double」などとして渡すことができます。
color – 境界線の色を設定するために使用されます。
initial – プロパティをデフォルト値に設定するために使用されます。
inherit – 親要素からプロパティを継承するために使用されます。
戻り値

スタイル境界線は、要素の境界線の色、幅、スタイルを表す文字列値を返します。

＃＃＃ステップ＃＃＃

ボックスに入力した後、以下の手順に従って入力ボックスの境界線を変更する必要があります -

ステップ 1

- テキストとボタン タイプの入力フィールドを含むフォーム要素を定義します。

• ステップ 2
- スクリプト コードは、ボックスを塗りつぶした後に入力ボックスの境界線を変更する関数を定義します。

• ステップ 3
- JavaScript セクションで、要素の値が変更されたときに発生する onchange イベントを宣言します。

• ステップ 4
- style.border は、要素の下の境界線を変更するために使用される HTML DOM 背景プロパティです。

• ステップ 5
- ユーザーが入力値に値を追加するたびに、onchange イベントが発生し、そのイベントが発生すると、値が null かどうかがチェックされます。値が存在し、空でない場合は、境界線の下部が緑色の点線に変わります。

• ＃＃＃例＃＃＃ 以下の例では、JavaScript を使用して、最初の入力ボックスの塗りつぶされた境界線を「10 ピクセルの実線の緑」に変更し、2 番目の入力ボックスの境界線を「3 ピクセルの点線の赤」に変更します。

  リーリー ＃＃＃例＃＃＃
入力ボックスの下枠のみを変更します

この例では、スタイルの borderBottom プロパティを使用して、入力ボックスの下の境界線を変更します。変更を有効にするには、onchange イベント属性を使用します。

リーリー ＃＃＃結論は＃＃＃

この記事では、入力ボックスに入力した後にその境界線を変更する方法を例を使って説明します。両方の入力フィールドにテキストを入力するたびに、下の境界線が緑色に変わる黄褐色の例を見てきました。両方の入力フィールドの値が空の場合は色は変化せず、値が存在する場合にのみ変化します。

以上がJavaScript を使用して、入力ボックスに入力した後に枠線を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。