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

JavaScript で CSS 変数を使用してプレースホルダーの色を更新する

JavaScript には、プレースホルダーの色を変更するための直接的な方法がありません。ただし、CSS 変数を使用してこの効果を実現できます。

HTML コード:

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

CSS コード:

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

JavaScriptコード:

function update() {
  const placeholderColor = document.querySelector('#color-picker').value;
  const input = document.querySelector('input[type=text]');

  input.style.setProperty("--placeholder-color", placeholderColor);
}

このスクリプトでは、update() 関数がカラー ピッカー要素から選択した色を取得し、CSS 変数 --placeholder-color の値をテキスト入力要素に設定します。 。 CSS でこの変数を参照すると、ボタンがクリックされたときにプレースホルダーの色が動的に更新されます。

注:

• 必ずカラー ピッカーを含めてください。要素を HTML に追加して、ユーザーが新しいプレースホルダーの色を選択できるようにします。
• この手法を使用すると、特定の色をターゲットにすることができますプレースホルダーは、それぞれの入力要素に一意の CSS クラス名を割り当てることによって作成されます。

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