YUI Library Home

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.

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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Dom Collection Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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