Question

我有一个带有SVG圈的输入框：

_ => println

使用Javascript如何将圆圈的颜色更改为红色（例如，当用户输入非法的内容时）？

Answer 1

当我阅读你的描述时， 1）您需要在javascript事件基础上根据您的功能添加样式[比如在更改或表单提交时，您想要验证的地方]

2）请修正一些小改动＆＃34; fill='#f00'＆＃34;在css下面：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='#f00'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;

Answer 2

如果你想使用svg作为css背景，你必须有一个单独的类，你可以换掉红色背景svg

<input class="a" onchange="checkValue(event)" type="text" name="a">

function checkValue(event){
  var input = event.target; 
  if(input.value.length<2){
    input.className = "error";
  }else{
    input.className = "";
  }
}

input{
  background:background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' fill="black" /></svg>")  no-repeat;
}

.error{
  background:background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' fill="red" /></svg>")  no-repeat;
}

使用Javascript更改CSS中定义的SVG图像的颜色

2 个答案: