在javascript中更改CSS属性

我想使用JS在html图像中进行逐渐模糊转换。我使用初始样式，然后使用document对象和全局变量更新样式属性

但以下代码不会更新任何内容：

var-val=8
函数调整_blur（）{
document.getElementById（“image”）.style.filter=blur（字符串（val）+“px”）
val-=1；
}
函数更新_blur（）{
设置超时（调整模糊，1000）
}

#图像{
滤镜：模糊（1px）；
最大宽度：600px；
}

问题是

.filter = blur(String(val) + "px")

是（非直观地）引用

window.blur

，它不接受任何参数，但在这样调用时不会抛出错误。这会导致浏览器试图模糊窗口，并将

未定义的

指定给样式的

.filter

属性，这根本不会更改视觉外观

您需要将包含

模糊（

的字符串指定给

.filter

属性，而不是调用

窗口。模糊

：

document.getElementById("image").style.filter = `blur(${String(val) + "px"})`

现场演示：

var-val=8
函数更新_blur（）{
设置超时（调整模糊，2000）
}
函数调整_blur（）{
document.getElementById（“image”）.style.filter=`blur（${String（val）+“px”}）`
val-=1；
}
更新\u blur（）

#图像{
滤镜：模糊（1px）；
最大宽度：600px；
}

---

如果我理解正确，您可能希望使用

setInterval

函数而不是

setTimeout

var-val=8
函数更新_blur（）{
设置间隔（调整模糊，1000）
}
函数调整_blur（）{
document.getElementById（“image”）.style.filter=“blur”（+String（val）+“px）”
val-=1；
}
更新\u blur（）

#图像{
滤镜：模糊（1px）；
最大宽度：600px；
}

为什么要用JS而不是CSS来做这些事情？CSS中有模糊转换的属性吗？