在 javascript 中更改 CSS 屬性
[英]Changing CSS properties in javascript
問題描述
我想使用 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'>
2 個解決方案
解決方案1
2 已采納 2019-12-21 09:10:02
問題是
.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'>
解決方案2
1 2019-12-21 09:11:06
如果我理解你的意思是正確的，你可能想使用setInterval函數而不是setTimeout
var val = 8 function update_blur() { window.setInterval(adjust_blur, 1000) } function adjust_blur() { document.getElementById("image").style.filter = "blur(" + String(val) + "px)" val -= 1; } update_blur() #image { filter: blur(1px); max-width: 600px; } <body onload="update_blur()"> <img src='https://image.freepik.com/free-vector/modern-yellow-bitcoin-design_1017-9631.jpg' id='image'>
通過 if/else 語句使用 JavaScript 事件偵聽器更改 CSS 屬性
[英]changing CSS properties with JavaScript event listener through if/else statements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.