如何更改 JavaScript 中的佔位符顏色？

使用JavaScript 更新佔位符顏色

雖然JavaScript 沒有提供修改佔位符顏色的直接解決方案，但您可以使用CSS實現此效果變數。這種方法可讓您根據使用者輸入或外部因素動態更新佔位符顏色。

定位所需元素

確保顏色變更僅影響特定元素佔位符，您可以使用其唯一識別碼或選擇器組合來定位輸入元素。例如，以下程式碼更新頁面上所有文字輸入元素的佔位符顏色：

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

動態更新顏色

要以程式設計方式更新佔位符顏色，您可以使用JavaScript 操作CSS 變數“--c”。該變數在 CSS 中定義並在佔位符定義中引用。以下程式碼示範如何將佔位符顏色設定為藍色：

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

範例

考慮以下HTML 和CSS 程式碼：

<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>

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

當您按一下按鈕時，JavaScript 函數「update()」將會運行，並設定CSS變數所有文字輸入的「--c」為藍色。結果，第一個輸入的佔位符顏色將變為藍色，而第二個輸入由於其類型屬性不同，將保持紅色。

透過使用 CSS 變數和 JavaScript，您可以輕鬆自訂佔位符顏色特定輸入元素的組合，增強使用者體驗並為您的設計提供靈活性。

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