JavaScript を使用してプレースホルダーの色を動的に変更するにはどうすればよいですか?

JavaScript を使用してプレースホルダーの色を動的に変更する

オンライン リソースが広範囲に利用可能であるにもかかわらず、解決策を見つけることができなかった可能性があります。 JavaScript を使用してテキストボックスのプレースホルダーの色を更新します。プロセスを順を追って説明する包括的なガイドは次のとおりです。

CSS 変数は簡単なアプローチを提供します。特定の要素をターゲットにするには、次の CSS コードを使用できます:

::placeholder {
  color: var(--c, red);
}

次に、JavaScript で次の関数を使用して、プレースホルダーの色を動的に更新できます:

function update() {
  document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}

これで、プレースホルダーの色の変更をトリガーする「更新」機能を備えたボタンを作成できます。クリックすると、update() 関数が実行され、プレースホルダーのテキストが青色に変わります。

<button onclick="update()\">Change</button>

また、CSS 変数を使用せずに、JavaScript でプレースホルダーの色を変更することもできます。

document.getElementById('text').style.color = newColor;

このメソッドは、プレースホルダー要素の color プロパティを直接設定します。ただし、color プロパティは特にプレースホルダーをターゲットにしていないため、プレースホルダーの外側で望ましくない色の変更が発生する可能性があることに注意してください。

この機能に対するブラウザーのサポートは異なることに注意してください。互換性を確保するために、必ず複数のブラウザ間で実装をテストしてください。

以上がJavaScript を使用してプレースホルダーの色を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。