JS修改伪元素

今天想模仿知乎首页做出输入为空时placeholder颜色变红的效果。

发现用这种直接设置的方法无效。

一查资料，发现其实：

伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JS无法直接操作它。而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。

那只能通过插入代码或添加切换class的方式来了。

一、插入代码：

$("head").append("<style id='lostPoint-color'>#account::placeholder{color: black}");

但这种方法有个缺点，重复多点几次，会一直增加样式，所以如果不爽的话，还需要再添加判断。

二、切换class

添加一个class：

.requiredErrorMask::placeholder{
    color: red;
}

用$(this).attr("class","classA classB");

classB对应.requiredErrorMask ;