javascript - 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.