Question

如果我有这个HTML

<img src="aaa.png" id="a" style="filter: alpha(opacity=100)"/>

然后这个javascript在IE6中运行

document.getElementById("a").filters.alpha.opacity = 60;

但如果没有设置样式

<img src="aaa.png" id="a" style=""/>

javascript抛出错误'filters.alpha'为null或不是对象

此代码有效

document.getElementById("a").style.filter = "alpha(opacity=60)";

然后应用于图像的其他过滤器将被覆盖。所以问题是：如何将alpha过滤器添加到任何HTML元素并将其他过滤器保留在IE中？

编辑我想要纯javascript（不是jQuery）解决方案

Answer 1

不幸的是，在我看来，您只能通过style.filter属性添加新元素，filters只能操作现有的元素。

filter是一个集合对象，您可以在此处找到文档：filters Collection。它为您提供了一种简单易用的现有过滤器，您可以打开和关闭它们（enabled）等。

例如，您可以使用

obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity=20;

或（如果alpha是你第一次过滤声明）

obj.filters.item(0).opacity=20;

<强>类

大多数情况下，最好将过滤器声明存储在CSS中的某些类下，并且只使用JS来分配正确的类，而不是直接操作style值。

Answer 2

经过一些更多的测试后，我来了解决方案

var filter = function(obj,f,params) {
  var found, nf, dx = "DXImageTransform.Microsoft.";

  // check if DXImageTransform.Microsoft.[Filter] or [Filter] filter is set
  try { nf = obj.filters.item(dx+f); found = true; } catch(e) {}
  if(!found) try { nf = obj.filters.item(f); found = true; } catch(e) {}

  // filter is set - change existing one
  if(found) {
    nf.Enabled = true; // if exists, it might be disabled
    if(params) for(var i in params) nf[i] = params[i];
  }

  // filter is not set - apply new one
  else {
    nf = "";
    if(params) for(var i in params) nf+= i.toLowerCase()+"="+params[i]+",";
    if(params) nf = "("+nf.substr(0,nf.length-1)+")";
    obj.style.filter+= "progid:"+dx+f+nf+" ";
  }

  // hasLayout property hack
  if(!obj.style.zoom) obj.style.zoom = 1;
};

示例

var obj = document.getElementById("a"); if(document.body.filters) filter(obj,"Alpha",{Opacity:50});

我希望这有效，如果有人发现问题，请告诉我。

<强>来源

obj.filters property http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx

filter.Alpha http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx

Answer 3

你可以提供你想要的n个过滤器，但只需要一个接一个地用空格分隔。例如，

STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
        progid:DXImageTransform.Microsoft.Alpha(opacity=60);"

点击此链接了解更多信息：http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

我希望能回答你的问题。

如何将alpha过滤器添加到任何HTML元素并将其他过滤器保留在IE中？

3 个答案: