YUI Library Examples: Dom Collection: Using setStyle

Dom Collection: Using setStyle

Clicking the button will use Dom's setStyle method to set the opacity of the element.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

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").

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Dom Collection Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings