Using getStyle

getStyle, part of the YUI Dom Collection, makes it easy to get the value of style properties from HTMLElements.

To illustrate the use of getStyle, we'll create a <div> called foo and a <div> called bar. When the button is clicked, the background color from bar will be applied to foo.

Add some simple CSS rules and markup for the demo element and a button to trigger the demo:

Now we will define the function that sets the background color of foo to the background color of bar. The first argument of the getStyle method is either the ID of an HTMLElement, or an actual HTMLElement object. The second is the style property that we wish to retrieve. The getStyle method returns the element's current value for that property. <script type="text/javascript"> var setBgColor = function() { var bgcolor = YAHOO.util.Dom.getStyle('bar', 'backgroundColor'); YAHOO.util.Dom.setStyle('foo', 'backgroundColor', bgcolor); }; </script>

To trigger the demo, 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.getStyle method. One of the benefits of this method is that it can retrieve either inline styles or styles set in a stylesheet. Browsers have different methods for retrieveing styles from a stylesheet, but the getStyle method normalizes these for you.

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.