从关键帧获取模糊滤镜值

Question

嘿伙计们，有没有办法在 javascript 中获取模糊滤镜值？

得到这样的东西：

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

我想获取模糊滤镜像素值。

我尝试过的：

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

两者在控制台中都是空白的...

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

Answer 1

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

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

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

*********************编辑*********************

好的，看来您可以使用 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;
     }
 }

Fiddle: https://jsfiddle.net/3kwjxog8/

Answer 2

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

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

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

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

此外，您无法单独设置 blur x 轴和 y 轴。

从关键帧获取模糊滤镜值

Get blur filter value from keyframes

javascript

jquery

keyframe