小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何在vue项目中 动态给placeholder设置 后台过来的样式
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
vue可以试着采用下面的方法
原生修改方式：
<input id="ipt" placeholder="请输入啊啊啊" type="text" />
<style>
/*支持css变量，自定义*/
@supports((--a:0)){
*{
--color:blue; /*默认颜色*/
--fontSize:10px; /*默认字体大小*/
}
input::-webkit-input-placeholder{
color:var(--color);
::-moz-placeholder{
::-ms-input-placeholder{
/*不支持css变量,只能默认颜色*/
@supports(!(--a:0)){
color:gray;
</style>
<script>
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//支持
if (isSupported) {
document.getElementById("ipt").style.setProperty('--color', 'yellow');/* 'yellow' 可以使用vue获取的后台数据，'--color'也可以，但要在placeholder那里提前设置默认值样式*/
} else {
/* 无法修改变量*/
</script>
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
设置的值没生效 取得默认值pink
主要是这句 document.getElementById("ipt").style.setProperty(）是否生效了
我是用了tagName查多个input但是 长度是0
你可以用document.getElementById("ipt").style.getPropertyValue("--color"）来查看设置的--color变量是否存在
可以了
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
vue可以试着采用下面的方法
原生修改方式：
<input id="ipt" placeholder="请输入啊啊啊" type="text" />
<style>
/*支持css变量，自定义*/
@supports((--a:0)){
*{
--color:blue; /*默认颜色*/
--fontSize:10px; /*默认字体大小*/
}
input::-webkit-input-placeholder{
color:var(--color);
}
::-moz-placeholder{
color:var(--color);
}
::-ms-input-placeholder{
color:var(--color);
}
}
/*不支持css变量,只能默认颜色*/
@supports(!(--a:0)){
input::-webkit-input-placeholder{
color:gray;
}
}
</style>
<script>
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//支持
if (isSupported) {
document.getElementById("ipt").style.setProperty('--color', 'yellow');/* 'yellow' 可以使用vue获取的后台数据，'--color'也可以，但要在placeholder那里提前设置默认值样式*/
} else {
/* 无法修改变量*/
}
</script>
主要是这句 document.getElementById("ipt").style.setProperty(）是否生效了
你可以用document.getElementById("ipt").style.getPropertyValue("--color"）来查看设置的--color变量是否存在
可以了