Take the 2-minute tour ×

I'm facing a strange behaviour by IE9 dealing with a prototype script. Here I'm setting two different opacity styles depending on mouseover / out:

window.onload = function(){
var freccia1 = $($$('.next_button')[0]);
freccia1.setStyle({opacity: '0.20'});       
freccia1.setStyle({filter: 'alpha(opacity=20)'});   
var freccia2 = $($$('.previous_button')[0]);
freccia2.setStyle({opacity: '0.20'});       

This is working fine in all browsers, including previous IE versions, nut not in IE9 which doesn't low the opacity..its console returns me:

Not possible to get the property 'setStyle' value: object null or undefined

does anyone know why ? thank you

share|improve this question
add comment

2 Answers

You didn't mention which version of prototype you are running. I ran into a similar problem that may be similar on one of my pages using prototype 1.5.0 (please don't judge). In 1.5.0 the setStyle and getStyle functions do a browser check for IE specifically when dealing with opacity/alpha(opacity).


In my case, setStyle calls getStyle('filter').replace(). Unfortunately getStyle('filter') returns null with IE9 so .replace throws an exception.

Some relevant notes from the IE team: http://blogs.msdn.com/b/ie/archive/2010/08/17/ie9-opacity-and-alpha.aspx

share|improve this answer
add comment

If you're going to use Prototype, you might as well use as much functionality as it offers since it takes browser compatibility into consideration so you don't have to.

Try this (untested):

document.observe('dom:loaded', function() {
    [$$('.next_button')[0], $$('.previous_button')[0]].each(function(ele) {
            opacity: '0.20',
            filter: 'alpha(opacity=20)'
share|improve this answer
Thank you for helping, but your code returns me: "$(ele).setStyle is undefined"... –  serytankian Jun 15 '11 at 8:04
@asnothingelse are you sure $$('.next_button')[0] and $$('.previous_button')[0] exist? –  John Conde Jun 15 '11 at 13:21
add comment

Your Answer


