如何在JavaScript中使用CSS过滤器？

我想在JavaScript中使用CSS过滤器

CSS过滤器示例：

.filter {
    -webkit-filter: blur(20px); /* Blur filter */
    -webkit-filter: invert(1); /* Invert filter */
    -webkit-filter: hue-rotate(100deg); /* Rotate Hue */
    ...
}

例如，如何使用JavaScript制作模糊图像

<img id="image" onmouseover="ImageHover();" src="source.png"/>

---

我希望你们明白我想要什么。

你们需要使用该元素的属性，例如：

var image = document.getElementById('image');
image.style.webkitFilter = "blur(20px);";

或

---

我建议使用此，以便以后可以将该功能与任何元素/Img一起使用

<img id="image" onmouseover="ImageHover(this);" src="source.png"/>

function ImageHover(el){
    el.classList.add("filter");
};

功能图像悬停（el）{
el.classList.add（“过滤器”）；
};

您使用的是jQuery吗？不，我没有使用jQuery。除了Ahmed的回答，我强烈建议尽可能不要使用内联脚本。您没有声明onmouseout的处理程序，因此不会返回正常状态。是的，我知道，但函数不会模糊图像，或者你看到图像模糊了吗？我更新了小提琴：问题是你添加类的方式与添加内联样式的方式相同，我通过添加新的css规则来解决这个问题，并将该类添加到该元素的类列表中谢谢：）正是我想要的。

image.style["-webkit-filter"] = "blur(20px);";

<img id="image" onmouseover="ImageHover(this);" src="source.png"/>

function ImageHover(el){
    el.classList.add("filter");
};