Question

Using the proprietary filter css in IE (7/8).

Trying to apply an additional filter (IE 7/8) to DOM nodes, and make sure that if any of them already have filter defined, to ADD the new filter and not replace it.

So, I have code something like this (jQuery):

$('.fxobject').each( 
 function() {
  this.style.filter += 'alpha(opacity=50)';
 }
);

My result is that the new filter (in this case, opacity) overwrites the old one on any nodes that already had a filter.

So, I try to read the value of filter various ways (jquery’s css(), and the this.style.filter way), and get nothing (although it knows it HAS a filter, it can’t seem to read the string value itself – which is why the += isn’t working I suppose).

So I am guessing maybe this IE filter implementation is an object of some sort (I see some documentation about node.filters), but can’t seem to figure out how to read the value and add an additional filter.

Anyone have a solution for this?

Answer 1

You can try this

$('.fxobject').each( 
  function() {
     var filter = $(this).css("filter") || '';
     $(this).css("filter", filter + 'alpha(opacity=50)');
  }
);