使用JS去设置placeholder的样式,你会吗?

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

使用JS去设置placeholder的样式,你会吗?
接下来,我们来看看同学的问题?
使用JS去设置placeholder的样式,你会吗?
很开心,同学们都叫我姐姐。

使用JS去设置placeholder的样式,你会吗?

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

首先,我们瞅瞅传统的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中,通过添加属性方式就可以实现了。

最后,来让我们看看效果:
使用JS去设置placeholder的样式,你会吗?
好了,今天的问题就到这,希望对各位大家有所帮助。期待下一次的重磅炸弹,大家有问题多多找我。

使用JS去设置placeholder的样式,你会吗?

上一篇:svg的使用之创建子标签


下一篇:Java书城项目第三阶段:优化,阿里社招java面试几轮