如何在 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);
}

Java程式碼：

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

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

在此腳本中，update() 函數從顏色選擇器元素中檢索所選顏色並設定CSS 變數的值--文字輸入元素中的佔位符顏色。透過在 CSS 中引用此變量，點擊按鈕時會動態更新佔位符顏色。

注意：

• 請務必包含顏色選擇器HTML 中的元素，使用戶能夠選擇新的佔位符顏色。
• 使用此技術，您可以透過為對應的輸入元素指派唯一的 CSS 類別名稱來定位特定的佔位符。

以上是如何在 JavaScript 中使用 CSS 變數動態更新佔位符顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！