fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>This example shows how to style an element using Node.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-style-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the HTML</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div id="demo">

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

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney</div>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Using Style Methods</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>In this example, we will set the node's color and compare the style and computedStyle values when our demo node is clicked.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeneyvar onClick = function(e) {

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney var node = e.currentTarget;

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

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

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

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney computedColor = node.getComputedStyle('color');

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney node.append('<dl>' +

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

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

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney '</dl>');

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney }

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney};

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>The last step is to assign the click handler.</p>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

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

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-style-source}}

fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney```