Question

嘿伙计们，有没有办法在javascript中获得模糊过滤器值？

得到这样的东西：

@keyframes move {
    0% {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}

我想获得模糊滤镜pxs值。

我尝试了什么：

blurValue0 = elementsArray[0].style["webkitFilter"];
blurValue1 = elementsArray[0].style.filter;

控制台中的两个都是空白的......

另外，有没有办法在不同的轴上使用模糊滤镜？像xBlur或yBlur？（对于图像，我知道文字是文字阴影）

Answer 1

您可以这样做以获取数字值，或者可以执行各种匹配以获得过滤器的类型：

document.getElementById('testBlur').style['-webkit-filter'].match(/\d+/)

很抱歉，但不知道沿轴过滤......

******************** EDIT *********************

好的，所以看起来你可以用getComputedStyle做一些事情，如下所示。让我知道你是如何继续这样做的：

var styles = window.getComputedStyle(document.getElementById('testBlur'), "");

 for (var i=0; i<styles.length; i++) {
     if (styles[i].match('-webkit-filter')) {
         console.log(styles['-webkit-filter']);
         break;
     }
 }

小提琴：https://jsfiddle.net/3kwjxog8/

Answer 2

只有在动态设置过滤器时才能找到过滤器，例如

elementsArray[0].style["-webkit-filter"] = "blur(1px)";

然后，它会动态模糊您的对象，elementsArray[0].style["-webkit-filter"]将返回blur(1px)。

我实际上不确定为什么通过css设置它会导致控制台中的值为空。对答案很感兴趣。

此外，到目前为止，您无法为x和y轴单独设置blur。

从关键帧获取模糊过滤器值

2 个答案: