<div id="demo">

<p>Click me to change my color and show some style information.</p>

</div>

<script type="text/javascript">

YUI().use('node', function(Y) {

var onClick = function(e) {

var node = e.currentTarget;

if (!node.one('dl')) { // only create the DL once

node.setStyle('color', 'green');

var styleColor = node.getStyle('color'),

computedColor = node.getComputedStyle('color');

node.append('<dl>' +

'<dt>style.color</dt><dd>' + styleColor + '</dd>' +

'<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +

'</dl>');

}

};

Y.one('#demo').on('click', onClick);

});

</script>