javascript - 从关键帧获取模糊滤镜值

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？ (对于图像，我知道文本是textshadow)

Answer 1

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

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

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

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

好的，看来您可以使用 getCompulatedStyle 执行以下操作。让我知道你的进展如何:

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/