javascript - 在 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( 的字符串到 .filter属性，而不是调用 window.blur :

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()

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

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