Clicking the button will use Dom's
setStyle method to set the opacity of the element.
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
foo. When the button is clicked, the opacity of
foo will be set to
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").
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.