Using setStyle

setStyle, part of the YUI Dom Collection, makes it easy to set the style properties of an HTMLElement. One of the benefits of this method is that it provides normalized (and simpler) mechanism for setting opacity in Internet Explorer.

The first thing we need to do is load the Dom Collection source file and dependencies:

To illustrate the use of setStyle, we'll create a <div> called foo. When the button is clicked, the opacity of foo will be set to 0.5.

Add some simple CSS rules and markup for the demo element:

Now we will define the function that sets the opacity of foo. The first argument of the setStyle method is either the ID of an HTMLElement, or an actual HTMLElement object. The second argument is the style property being set, and the third is the value to be applied to the property.

Next we will use the YUI Event Utility's on method to listen for clicks on the button.

This is a simple example of how to use the YAHOO.util.Dom.setStyle method. In addition to normalizing opacity, setStyle fixes other properties that vary across browsers (e.g. "float").