如何使用 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>

或者，您可以在 JavaScript 中修改佔位符顏色，而不使用 CSS 變數：

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

該方法直接設定佔位符元素的顏色屬性。但是，值得注意的是，顏色屬性並不專門針對佔位符，這可能會導致佔位符之外出現不必要的顏色變化。

請記住，瀏覽器對此功能的支援各不相同。確保在多個瀏覽器上測試您的實作以確保相容性。

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