javascript 如何将 alpha 过滤器添加到任何 HTML 元素并在 IE 中保留其他过滤器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5259824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add alpha filter to any HTML element and keep the other filters in IE?
提问by Jan Turoň
If I have this HTML
如果我有这个 HTML
<img src="aaa.png" id="a" style="filter: alpha(opacity=100)"/>
Then this javascript works in IE6
然后这个 javascript 在 IE6 中工作
document.getElementById("a").filters.alpha.opacity = 60;
But if no style is set
但是如果没有设置样式
<img src="aaa.png" id="a" style=""/>
The javascript throws an error 'filters.alpha' is null or not an object
javascript 抛出错误'filters.alpha' is null or not an object
This code works
此代码有效
document.getElementById("a").style.filter = "alpha(opacity=60)";
But then the other filters applied to the image are overwritten. So the question is: How to add alpha filter to any HTML element and keep the other filters in IE?
但随后应用于图像的其他过滤器被覆盖。所以问题是：如何将 alpha 过滤器添加到任何 HTML 元素并在 IE 中保留其他过滤器？
editI would like pure javascript (not jQuery) solution
编辑我想要纯 javascript（不是 jQuery）解决方案
回答by kapa
Unfortunately, it seems to me you can only add new elements through the style.filterproperty, with filtersyou can only manipulate already existing ones.
不幸的是，在我看来，您只能通过该style.filter属性添加新元素，并且filters只能操作已经存在的元素。
filteris a collection object, you can find the docs here: filters Collection. It gives you a nice and easy way to play with your existingfilters, you can turn them on and off (enabled), etc.
filter是一个集合对象，您可以在这里找到文档：过滤器集合。它为您提供了一种使用现有过滤器的简便方法，您可以打开和关闭它们 ( enabled) 等。
For example, you can use
例如，您可以使用
obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity=20;
or (if alpha was you first filter declaration)
或（如果 alpha 是您的第一个过滤器声明）
obj.filters.item(0).opacity=20;
CLASSES
班级
Most of the time you're better off storing your filter declarations under certain classes in your CSS, and only using JS to assign the right classes instead of manipulating stylevalues directly.
大多数情况下，最好将过滤器声明存储在 CSS 中的某些类下，并且仅使用 JS 来分配正确的类，而不是style直接操作值。
回答by Jan Turoň
After some more testing, I come with this solution
经过一些更多的测试，我来了这个解决方案
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;
};
Example
例子
var obj = document.getElementById("a");
if(document.body.filters) filter(obj,"Alpha",{Opacity:50});
I hope this works, if anybody finds a problem, please tell me.
我希望这有效，如果有人发现问题，请告诉我。
Sources
来源
obj.filters property http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx
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
filter.Alpha http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx
回答by Ashwin Krishnamurthy
You can give n number of filters you want but just keep appending them one after the other separated by a space. For example ,
您可以提供 n 个您想要的过滤器，但只需将它们一个接一个地附加，以空格分隔。例如 ，
STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.Alpha(opacity=60);"
Check this link for more : http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx
查看此链接了解更多信息：http: //msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx
I hope that answers your question.
我希望这能回答你的问题。
