如何使用按鈕更改在搜索字段中輸入的文本值的顏色？

Question

使用此代碼，我們可以通過一個按鈕將多個值發送到搜索字段，但是我們如何使這些值顯示為一種顏色（例如綠色）？

http://jsfiddle.net/7bpaL5hy/

 <form id="form1" name="form1" method="post"> <p> <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" /> </p> <p> <label> <input type="text" name="bbb" id="bbb" /> </label> </p> </form> <script type="text/javascript"> const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4']; let myInd = 0; function setValue() { document.getElementById('bbb').value = myValues[myInd]; myInd = myInd >= (myValues.length - 1)? 0: myInd+1; } </script>

Answer 1

只需用js添加文本顏色，如下所示：

在這里試試，它可以工作： http://jsfiddle.net/baomy5hr/或者在這里，字體大小和粗體： http://jsfiddle.net/6s0zqf1a/

 <form id="form1" name="form1" method="post"> <p> <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" /> </p> <p> <label> <input type="text" name="bbb" id="bbb" /> </label> </p> </form> <script type="text/javascript"> const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4']; let myInd = 0; function setValue() { document.getElementById('bbb').value = myValues[myInd]; myInd = myInd >= (myValues.length - 1)? 0: myInd+1; $(document).ready(function(){ $('#bbb').css({'color':'green'}); }); } </script>

Answer 2

您可以通過多種方式做到這一點，但最好的方法是使用 CSS 來完成。 您只需要存儲這些值的容器 ID。 在這里，在您的情況下，您有帶有 id #bbb 的輸入標簽，只需使用它並添加您想要的任何顏色。

#bbb{ color: green; }

您也可以使用 JS 執行此操作，但是當可以使用 CSS 完成時，為什么要使用 JavaScript。

檢查下面的片段。

 #bbb{ color: green; }

 <form id="form1" name="form1" method="post"> <p> <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" /> </p> <p> <label> <input type="text" name="bbb" id="bbb" /> </label> </p> </form> <script type="text/javascript"> const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4']; let myInd = 0; function setValue() { document.getElementById('bbb').value = myValues[myInd]; myInd = myInd >= (myValues.length - 1)? 0: myInd+1; } </script>