449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings<div id="demo">

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

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings</div>

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings<script type="text/javascript">

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken StubbingsYUI().use('node', function(Y) {

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings var onClick = function(e) {

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings var node = e.currentTarget;

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

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings node.setStyle('color', 'green');

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings var styleColor = node.getStyle('color'),

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings computedColor = node.getComputedStyle('color');

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings node.append('<dl>' +

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings '<dt>style.color</dt><dd>' + styleColor + '</dd>' +

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings '<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings '</dl>');

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings }

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings };

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings

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

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings});

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings</script>

449854c2a07b50ea64d9d6a8b03d18d4afeeee43Ken Stubbings