如何动态的设置input的placeholder样式

最新推荐文章于 2024-05-07 11:27:35 发布

置顶衣神

最新推荐文章于 2024-05-07 11:27:35 发布

阅读量5.5k

点赞数

文章标签： css javascript input placeholder html

本文链接：https://blog.csdn.net/qq_36225634/article/details/81002984

版权

最近写页面的时候恰好遇到了一个关于动态设置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的最大化通信，实现更多的动态功能。

衣神

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何动态的设置input的placeholder样式

最近写页面的时候恰好遇到了一个关于动态设置input的placeholder样式的问题，看了一下很多的论坛博客写的大都是静态设置placeholder的样式，例如下面：input::-webkit-input-placeholder{ /*WebKit browsers*/color: red;}input::-moz-input-placeholder{ /*Mozilla Firefox...
复制链接

扫一扫