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

我建议使用这个，这样该功能可以用于您想要的任何元素/ Img

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

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

Answer 2

您需要使用该元素的属性，如下所示：

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

或

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

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

2 个答案: