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

Question

我想在 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"/>

同时

function ImageHover() {
    document.getElementById('image').??????='???'
}

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

Answer 1

我建议使用this，这样该函数以后可以与您想要的任何元素/Img 一起使用

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

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