** 今天有同学又双叒叕给我扔了一个王炸?又一次刷新我对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中,通过添加属性方式就可以实现了。
最后,来让我们看看效果:
好了,今天的问题就到这,希望对各位大家有所帮助。期待下一次的重磅炸弹,大家有问题多多找我。