YUI Library Home

YUI Library Examples: Dom Collection: Using getStyle

Dom Collection: Using getStyle

Clicking the button will use Dom's getStyle method to get the background color of the red element and pass it to the setStyle method, which will set the blue element's background to the same color.

View example in new window.

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:

1<style type="text/css"> 
2#foo { 
3    background-color:#00f; 
4    height:10px; 
5    width:10px; 
6} 
7 
8#bar { 
9    width:100px; 
10    height:100px; 
11    background-color:#f00; 
12    margin:0 0 1em 100px; 
13} 
14</style> 
15 
16<div id="foo"></div> 
17<div id="bar"></div> 
18<button id="demo-run">run</button> 
view plain | print | ?

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.

1<script type="text/javascript"> 
2    var setBgColor = function() { 
3        var bgcolor = YAHOO.util.Dom.getStyle('bar', 'backgroundColor'); 
4        YAHOO.util.Dom.setStyle('foo', 'backgroundColor', bgcolor); 
5    }; 
6</script> 
view plain | print | ?

To trigger the demo, we will use the YUI Event Utility's on method to listen for clicks on the button.

1<script type="text/javascript"> 
2    YAHOO.util.Event.on('demo-run', 'click', setBgColor); 
3</script> 
view plain | print | ?

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.

YUI Logger Output:

Logger Console

INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-Dom010
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-LogReader09
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-Get08
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-example07
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-global06
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-window05
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-time04
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-error03
WARN 118ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 118ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-warn02
WARN 118ms (+1) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 117ms (+0) 7:01:20 PM:
Dom
generateId generating yui-log-filter-info01
WARN 117ms (+0) 7:01:20 PM:
Dom
batch called with invalid arguments
INFO 117ms (+1) 7:01:20 PM:
Dom
generateId generating yui-log-hd00
INFO 116ms (+85) 7:01:20 PM:
LogReader  instance0
LogReader initialized
INFO 31ms (+0) 7:01:20 PM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+0) 7:01:20 PM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+29) 7:01:20 PM:
Get
_next: q0, loaded: undefined
INFO 2ms (+2) 7:01:20 PM:
example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO 0ms (+0) 7:01:20 PM:
global
Logger initialized

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 © 2011 Yahoo! Inc. All rights reserved.

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