使用JS去设置placeholder的样式，你会吗？

** 今天有同学又双叒叕给我扔了一个王炸？又一次刷新我对bug的认知啊，看来我还是小看js了。**

接下来，我们来看看同学的问题？

很开心，同学们都叫我姐姐。

跑偏了，跑偏了。这个问题的答案是：“当然可以”。

首先，我们瞅瞅传统的CSS如何设置placeholder的样式：

 input::placeholder{
            color: tomato;
        }

::placeholder是一个伪类，也就是通过伪类的方式来设置。

接下来，让我们再看看JS怎么设置：

第一步：通过交集选择器，给咱们的元素文本通过::placeholder伪类设置一个样式，重点注意“.change”是一个类名。

   #myinput.change::placeholder{
            color: tomato;
            padding-left: 40px;
        }

第二步：设置好我们的元素

    电话： <input type="text" placeholder="" class="tex" id="myinput">

第三步：获取我们的元素，通过setAttribute设置我们元素的属性及属性值，把change添加到我们的class属性当中。

  window.onload = function () {
        var input = document.querySelector("input");
        input.setAttribute("placeholder", "请输入内容");
        input.setAttribute('class', 'tex change');
    }

此方法的好处在于，文本框中提示信息想要的样式都可以设置在CSS中，通过添加属性方式就可以实现了。

最后，来让我们看看效果：

好了，今天的问题就到这，希望对各位大家有所帮助。期待下一次的重磅炸弹，大家有问题多多找我。