如何使用 JavaScript 動態變更佔位符顏色？

使用 JavaScript 操作佔位符顏色

確定如何透過 JavaScript 更改文字方塊的佔位符顏色可能會令人困惑。雖然 ::placeholder 選擇器可以在 CSS 中使用來定義佔位符顏色，但似乎沒有直接的 JavaScript 等效項。

解：CSS 變數

一個可行的解是利用 CSS 變數。實現此目標的方法如下：

1.定義CSS 變數：

:root {
  --placeholder-color: 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中文網其他相關文章！