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

2021-09-28 19:58:05 阅读：454 来源： 互联网

标签：伪类样式 setAttribute JS 设置 input placeholder change

** 今天有同学又双叒叕给我扔了一个王炸？又一次刷新我对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中，通过添加属性方式就可以实现了。

最后，来让我们看看效果：
在这里插入图片描述
好了，今天的问题就到这，希望对各位大家有所帮助。期待下一次的重磅炸弹，大家有问题多多找我。

在这里插入图片描述

标签：伪类,样式,setAttribute,JS,设置,input,placeholder,change
来源： https://blog.csdn.net/qq_41126463/article/details/120535988

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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