How to add alpha filter to any HTML element and keep the 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 no style is set

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

The javascript throws an error '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?

edit I would like pure javascript (not jQuery) solution

Answer 1

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

filter is a collection object, you can find the docs here: filters Collection. It 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 you first filter declaration)

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 style values directly.

Answer 2

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

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

Answer 3

You can give n number of filters you want but just keep appending them one after the other 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 : http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

I hope that answers your question.