在 javascript 中更改 CSS 属性

Question

我想使用 JS 在 html 图像中进行渐变模糊过渡。我使用的是初始样式，然后使用文档对象和全局变量更新样式属性。

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

var val = 8

function adjust_blur() {
  document.getElementById("image").style.filter = blur(String(val) + "px")
  val -= 1;
}

function update_blur() {
  window.setTimeout(adjust_blur, 1000)
}

#image {
  filter: blur(1px);
  max-width: 600px;
}

<img src='https://image.freepik.com/free-vector/modern-yellow-bitcoin-design_1017-9631.jpg' id='image'>

Answer 1

问题是

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

是（不直观地）引用window.blur，它不接受任何参数，但在这样调用时不会抛出错误。这会导致浏览器尝试模糊窗口，并被undefined分配给.filter样式的属性，这根本不会改变视觉外观。

您需要分配一个包含该属性的字符串，而不是调用：blur(.filterwindow.blur

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

现场演示：

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

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

var val = 8

function update_blur() {
  window.setTimeout(adjust_blur, 2000)
}

function adjust_blur() {
  document.getElementById("image").style.filter = `blur(${String(val) + "px"})`
  val -= 1;
}
update_blur()