Setting opacity of html elements in different browsers

javascript opacity
merveotesi picture merveotesi · Dec 16, 2011 · Viewed 45.8k times · Source

I need to set an HTML <img src=""/> object's opacity in JavaScript in all the browsers.

In Firefox I do it with line:

imageobject.style.MozOpacity=opacity/100;

What is the proper javascript code to set the opacity of an element in different browsers?

Answer

Dennis picture Dennis · Dec 16, 2011 
img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

You don't need to sniff the user agent, just set both values as browsers will ignore the irrelevant one.

Related questions

jQuery opacity animation

I am making a website, and it allows users to change view options. I use jQuery to smooth animations for font changing. It fades the whole page out and back in again with the new fonts. The fade out animation …

Read More
canvas fillStyle in interval with transparent/opacity

This small code clear old canvas data in interval: // start interval ctx.save(); ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; ctx.fillRect(0, 0, ctx.width, ctx.height); ctx.restore(); //some draw code for new graph ... //end interval My work area become black, because i set …

Read More
Check opacity by jQuery

How do I check if the opacity of an element is 0, and then do something in jQuery?

Read More