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

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
	}
}
Get our Articles via Email. Enter your email address.

You may also like...

3 Comments

  1. maketo says:

    guys i have used the css thing and its not working. i want to try this code but how do i integrate it in the drop down menu. will u send me an email as well. [email protected]

  2. KARTHIK says:

    how to dynamically add jsp database value for jquery+ajax success function

  3. Hi viral how to do this using jquery when we do the slider? do you have any idea.

Leave a Reply

Your email address will not be published. Required fields are marked *