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

JavaScript を使用したプレースホルダーの色の操作

JavaScript を使用してテキストボックスのプレースホルダーの色を変更する方法を決定するのは、複雑になる場合があります。 ::placeholder セレクターは CSS でプレースホルダーの色を定義するために使用できますが、JavaScript に直接相当するものはないようです。

解決策: CSS 変数

実行可能な解決策は、CSS 変数を活用することです。これを実現する方法は次のとおりです。

1. CSS 変数を定義します:

:root {
  --placeholder-color: red;
}

これにより、初期値が red の --placeholder-color という名前の CSS 変数が作成されます。

2.変数をプレースホルダーに適用します:

::placeholder {
  color: var(--placeholder-color);
}

::placeholder ルール内で --placeholder-color 変数を参照することにより、プレースホルダーの色はルート要素で定義された値を継承します。

3.変数を動的に更新します:

document.querySelector('input[type=text]').style.setProperty("--placeholder-color", "blue");

JavaScript を使用すると、--placeholder-color 変数の値を動的に更新できます。これにより、一致するすべての要素のプレースホルダーの色が変更されます。

例:

<input type="text" placeholder="placeholder">
<button onclick="update()">Change color</button>

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

利点:

• 特定の要素の正確な色の変更が可能になります。
• 対話性と動的な更新が可能です。
• 主要なブラウザ間の互換性をサポートします。

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