如何使用javascript将占位符颜色更改为透明

我正在尝试更改占位符的颜色，但是我无法使javascript正确地调用元素，您能帮助我吗

我正在学习javascript，我试图用WYSIWYG编辑器编辑它，但由于内容是动态的，所以autocompleted的整个功能停止工作

HTML

---

我认为不需要使用javascript，您可以使用css来实现。只需在css文件中添加以下代码

<style>
::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}
</style>

：：占位符{
颜色：红色；
不透明度：1；/*Firefox*/
}
：-ms输入占位符{/*Internet Explorer 10-11*/
颜色：红色；
}
：-ms输入占位符{/*Microsoft Edge*/
颜色：红色；
}

您不需要javascript，除非您有条件尝试将类添加到输入中，然后使用sass或普通css：

input#search::placeholder{
color:red;}

使用sass：

input{
&#search{
    &::placeholder{
        color : red
    }
 }
}

如果您想使用javascript，只需在单击事件上添加一个类，例如：

var d = document.getElementById("div1");
d.className += " otherclass";

然后：

input.otherclass::placeholder{
 color:red;
}

您可以使用此代码

：-webkit输入占位符{/*Chrome*/
颜色：红色！重要；
}
：-ms输入占位符{/*IE 10+*/
颜色：红色！重要；
}
：-moz占位符{/*Firefox19+*/
颜色：红色！重要；
不透明度：1；
}
：-moz占位符{/*Firefox 4-18*/
颜色：红色！重要；
不透明度：1；
}

：：占位符{opacity:0}

您好，谢谢您的回复。这似乎可行，但它更改了正在键入的文本，但我想更改默认情况下显示的文本。这是搜索栏的一个输入字段，其中写着“在此处键入”，我想通过删除此文本并保留输入字段为空进行A/B测试，因此基本上将颜色更改为透明。您想使占位符透明还是要键入的文本？文本，我已经根据您的建议解决了，谢谢！

var d = document.getElementById("div1");
d.className += " otherclass";

input.otherclass::placeholder{
 color:red;
}