How to add an alpha filter to any HTML element and save other filters in IE?

Question

If I have this HTML

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

Then this javascript works in IE6

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

But if the style is not set

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

javascript throws error "filters.alpha" is null or not an object

This code works

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

But then other filters applied to the image are overwritten. So the question is: how to add an alpha filter to any HTML element and save other filters in IE?

edit I would like to use a pure javascript (not jQuery) solution

Answer 1

Unfortunately, it seems to me that you can only add new elements through the style.filter property, while you can manipulate filters with existing ones.

filter - a collection object, you can find documents here: a collection of filters . This gives you a nice and easy way to play with your existing filters, you can turn them on and off ( enabled ), etc.

For example, you can use

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

or (if alpha was the first filter declaration)

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

CLASSES

In most cases, you are better off storing filter declarations under specific classes in your CSS and use only JS to assign the correct classes instead of directly using style values.

Answer 2

After some testing, I came up 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 someone finds a problem, please tell me.

Sources

property 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

Answer 3

You can give n the number of filters you want, but just add them one by one, separated by a space. For example,

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

Check this link for more information: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

Hope the answer to your question.