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
	}
}

Facebook  Twitter      Stumbleupon  Delicious
  

One Comment on “Setting opacity of html element using Javascript”

  • maketo wrote on 26 February, 2009, 16:47

    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. maketo@neo.co.mu

Write a Comment

Gravatars are small images that can show your personality. You can get your gravatar for free today!

Copyright © 2010 ViralPatel.net. All rights reserved.