动态应用多个 CSS 过滤器答案

【问题标题】：Apply multiple css filters dynamically动态应用多个 CSS 过滤器
【发布时间】：2015-11-25 16:56:08
【问题描述】：

假设我想对一张图片应用一系列 CSS 过滤器。这是我的图片：

var img = document.getElementById("my_image.png");

这里是应用过滤器的<input type="range"> 滑块：

var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");

我为每个事件添加了一个事件监听器：

slider1.addEventListener("input", function(){
    img.style.filter = ( "sepia(" + this.value + ")" );
});
slider2.addEventListener("input", function(){
    img.style.filter = ( "blur(" + this.value + "px)" );
});

当我移动第二个滑块时，它将删除第一个滑块的过滤器属性。但是如果我+= 过滤器属性，它会在滑块的每一步都添加到img.style.filter 字符串。如果我使用“更改”事件侦听器，用户将无法从滤镜效果的实时“预览”中受益。（如果用户再次返回滑块，则会导致错误的 img.style.filter 属性）。

那么在保持实时渲染效果的同时操作相关滑块时，仅更新 img.style.filter 属性的相关部分的最佳纯 JavaScript（无 jquery）方法是什么？

【问题讨论】：

不要忘记供应商前缀！

标签： javascript css css-filters

【解决方案1】：

给你。 https://jsfiddle.net/2p8kwjv1/1/

显然，如果您想要多个过滤器，您必须在同一个过滤器定义中定义它们。像这样

img{
    filter: blur(50px) sepia(50%);
    -webkit-filter: blur(50px) sepia(50%);
}

因此，要在 javascript 中实现这一点，您必须保留对这些值的引用。然后每次更改棕褐色时，您还可以应用当前模糊值同时动态显示两个滤镜。

var sepia = slider1.value;
var blur = slider2.value;

slider1.addEventListener("input", function(){
    sepia = this.value;
    img.style["-webkit-filter"] = "blur("+blur+"px) sepia(" + this.value + "%)";
});
slider2.addEventListener("input", function(){
    blur = this.value;
    img.style["-webkit-filter"] = "blur(" + this.value + "px) sepia("+sepia+"%)" ;
});

【讨论】：