通过Javascript更改CSS筛选器值

我正在开发一个非常基本的图像编辑器，但是我无法使用范围输入滑块（#fx滑块）来影响实际的css过滤器值。代码如下：

函数ChangeFilter（）{
var ifx=document.getElementById（“canvasFrame”）；
var br=document.getElementById（“br”）；
var ct=document.getElementById（“ct”）；
var st=document.getElementById（“饱和”）；
ifx.style.WebkitFilter=“亮度（“+br.value*10+”）”；
ifx.style.filter=“亮度（“+br.value*10+”）”；
ifx.style.WebkitFilter=“对比度（“+ct.value*10+”）”；
ifx.style.filter=“对比度（“+ct.value*10+”）”；
ifx.style.WebkitFilter=“饱和（“+st.value*10+”）”；
ifx.style.filter=“饱和（“+st.value*10+”）”；
}

#画布框架{
宽度：100px；
高度：50px；
滤光片：亮度（100%）对比度（100%）饱和（100%）；
-webkit过滤器：亮度（100%）对比度（100%）饱和（100%）；
}

亮度
对比度
饱和

您需要在画布容器中添加一个id，并且您使用了错误的id进行饱和度控制。另外，您应该连接3个控件，否则您只需要设置饱和度级别

function ChangeFilter() {
  var ifx = document.getElementById("canvasFrame");  //need to update this id in you html
  var br = document.getElementById("br");
  var ct = document.getElementById("ct");
  var st = document.getElementById("st");  //this id was wrong in your code

  //set all 3 filter values at once.
  ifx.style.webkitFilter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)";
  ifx.style.filter = "brightness(" + br.value * 10 + "%) contrast(" + ct.value * 10 + "%) saturate(" + st.value * 10 + "%)";
}

---

CodePen:

您有一些基本的打字错误。元素具有

类

，但您使用的是

getElementById

。在设置样式的行中的引号后面有一个额外的

）

。而且它是

webkitFilter

而不是

webkitFilter

哦，我猜你真的不想把你的过滤器乘以10，这样你的百分比就从1000%增加到2000%，但我离开了它，因为它是你以前做的。这工作非常完美！非常感谢。：）在创建我发布在这里的简化代码时，我不小心将过滤器值乘数留在了那里。再次感谢。问题解决了。