Setting opacity of html element using Javascript

You must have seen the blur effect of html elements like table, div where the opacity of these elements are slowly made to transparent or opaque. This can be acheived through javascript. Internet Exlporer supports a CSS attribute called filter, wherein you can apply lot of different filter options available in browser. There are currently three categories of filters – Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities. Hence following code can be used to set opacity of an html element in IE.

var opacityValue = 0.5; //make it 50% opaque
myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE
Code language: JavaScript (javascript)

But the above code will not work with other browsers like Firefox, Opera etc. Firefox supports another CSS property called opacity which controls the opacity of an element. Following javascript function will set the opacity of any html element irrespective of the browser.

function setOpacity (myElement, opacityValue) {
	if (window.ActiveXObject) {
		myElement.style.filter = "alpha(opacity="
			 + opacityValue*100 + ")"; // IE
	} else {
		myElement.style.opacity = opacityValue; // Gecko/Opera
	}
}
Code language: JavaScript (javascript)