更改 textarea 占位符的顏色 onclick

Question

假設我有一個按鈕和一個文本區域。 textarea占位符的正常state是灰色的。 單擊按鈕時，它應該將占位符更改為黑色。 我該怎么做？

Answer 1

::placeholder is the pseudo class that will control the placeholder text of an input... You can set this in a class and then toggle the class or add the class to your element on click.

 let ta = document.getElementById('ta') function changeTAText(){ // the following would toggle on each click //=> ta.classList.toggle('placeHolderText') // The following would add it without the // ability to toggle on click ta.classList = 'placeHolderText'; } btn.addEventListener("click", changeTAText)

 .placeHolderText::placeholder { color: black; }

 <textarea id="ta" placeholder="enter your text here"></textarea> <button id="btn">Change Color of Placeholder Text</button>

Answer 2

我將發布部分代碼以使占位符變為紅色。 添加一個按鈕並在單擊按鈕時切換 textarea placeholder-red的 class 。

 textarea.placeholder-red::placeholder { color: red; }

 <textarea rows="4" cols="50" class="placeholder-red" placeholder="Describe yourself here..."></textarea>