最近写页面的时候恰好遇到了一个关于动态设置input的placeholder样式的问题,看了一下很多的论坛博客写的大都是静态设置placeholder的样式,例如下面:
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}
(代码片段来自网络)
给input的placeholder设置了字体颜色为红色,那么如果我想动态的改变placeholder字体颜色,比如后台传来样式该如何做呢?
这时候需要使用到css的变量和js对css属性的控制,实现js动态改变css的变量值进而改变css的样式,实现placeholder的改变。
关于css变量和js对css属性的改变,可以参考阮一峰大神的有关文章:
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
具体示例如下:
<body>
<input id="ipt" placeholder="请输入啊啊啊" type="text" />
<input type="button" value="变色" οnclick="change()"/>
<input type="button" value="读取" οnclick="read()"/>
<input type="button" value="还原" οnclick="back()"/>
<style>
/*支持css变量,自定义*/
@supports((--a:0)){
//全局变量放在:root里定义
:root{
--color:blue;
/*--fontSize:20px;*/
}
input::-webkit-input-placeholder{
color:var(--color,red);/*变量不存在时默认颜色red*/
font-size:var(--fontSize,12px);/*变量不存在时默认字体大小12px*/
}
::-moz-placeholder{
color:var(--color);
}
::-ms-input-placeholder{
color:var(--color);
}
}
/*不支持css变量,只能默认颜色*/
@supports(!(--a:0)){
input::-webkit-input-placeholder{
color:gray;
}
}
</style>
<script>
function change(){
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//判断是否支持css变量
if (isSupported) {
//支持则使用js来动态的修改变量的值,也就修改了placeholder为紫色
document.getElementById("ipt").style.setProperty('--color', 'purple');
} else {
/* 无法修改变量*/
}
}
function read(){
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//支持
if (isSupported) {
alert(document.getElementById("ipt").style.getPropertyValue('--color'));
} else {
/* 无法修改变量*/
}
}
function back(){
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//支持
if (isSupported) {
document.getElementById("ipt").style.removeProperty('--color');
} else {
/* 无法修改变量*/
}
}
</script>
</body>
关于css变量的语法上的有关知识可以参考上面的链接
这只是一种思路,类似的可以使用js和css变量来动态改变css的各种属性,实现js和css的最大化通信,实现更多的动态功能。