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

【问题标题】：How to add alpha filter to any HTML element and keep the other filters in IE?如何将 alpha 过滤器添加到任何 HTML 元素并将其他过滤器保留在 IE 中？
【发布时间】：2011-07-12 16:51:50
【问题描述】：

如果我有这个 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)";

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

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

【问题讨论】：

标签： javascript css internet-explorer

【解决方案1】：

经过更多测试，我提出了这个解决方案

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 属性http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx

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

【讨论】：

很好的编码规则。我差点以为你的代码示例被混淆了！

【解决方案2】：

不幸的是，在我看来你只能通过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 值。

【讨论】：

没有。如果未设置 Alpha 过滤器并且没有任何反应（至少在我的 IE6 测试中），您建议的代码将引发异常。您可以使用 style.filter+=... - 但在这种情况下，字符串会越来越长。
哦，误会了...我只是提供了一种访问当前过滤器的好方法，但我也强调了使用过滤器不能添加新的过滤器。
是的。至少我同时从同一个 MSDN 来源得出了相同的结论 :-) 它帮助我创建了一个防弹（？）功能（请参阅我的帖子）。使用 enabled 属性，可以在任何 IE 中创建/修改/取消设置任何过滤器。已解决，已采纳，谢谢。

【解决方案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

我希望这能回答你的问题。

【讨论】：

是的，这很有用。但是如何通过javascript添加过滤器？