修改此腳本

Question

我發現這個腳本在這個網站，這有助於淡入/出透明的PNG在IE沒有透明部分的淡入淡出效果時被塗黑：

var i; 
    for (i in document.images) { 
    if (document.images[i].src) { 
     var imgSrc = document.images[i].src; 
     if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') { 
      document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')"; 
     } 
    } 
} 

這個腳本是由創建this stackoverflow user，它在我的網站上效果非常好。不過，我想稍微修改一下。該腳本查找我的頁面上的所有.png文件並應用過濾器。但是，這可能會導致性能問題，因爲我在我的網站上有很多透明的.png文件，但我只需要將這個過濾器應用於其中的一個。這是一個固定位置菜單的DIV背景圖像，在頁面滾動時使用jQuery淡入淡出。

有人可以幫我修改這個腳本，這樣我就可以給它提供一個圖像或使用getElementById（「菜單」）並讓它應用這個過濾器。沒有任何我嘗試過似乎工作，並將過濾器放入我的CSS也沒有工作，所以JavaScript的方式似乎是要走的路。我只需要在一個.png上使用它，而不是全部。

請記住這是div #menu的背景圖片，所以圖片本身沒有ID，當然div也是。任何幫助將不勝感激。

Answer 1

根據規範，document.images返回一個img元素的集合，所以如果它是background-image，那就行不通了。但是，如果它是在後臺使用的img，它將起作用。如果你只是把它應用到一個圖像，其要知道ID，那麼這將會是

function applyFilterToImageById(id) { 
    var i, 
     parentElement = document.getElementById(id); 
    for (i in parentElement.images) { 
    if (document.images[i].src) { 
     var imgSrc = document.images[i].src; 
     if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') { 
      document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')"; 
     } 
    } 
}