#

# Example: Node Styling

This example shows how to style an element using Node.

Click me to change my text color and show some style information.

style.color
  black
computedStyle.color
  rgb(0, 0, 0)

## Setting up the HTML

First we need some HTML to work with.

    <div id="demo">
        <p>Click me to change my color and show some style information.</p>
    </div>

## Using Style Methods

In this example, we will set the node's color and compare the style and computedStyle values when our demo node is clicked.

    var onClick = function(e) {
        var node = e.currentTarget;
            node.setStyle('color', 'red');
            var styleColor = node.getStyle('color'),
                computedColor = node.getComputedStyle('color');

            Y.one('.example dl').setContent('<dt>style.color</dt><dd>' +
            styleColor + '</dd>' +
            '<dt>computedStyle.color</dt><dd>' +
            computedColor + '</dd>');
    };

The last step is to assign the click handler.

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

## Complete Example Source

    <style>
    .example #demo {
        background-color: #D4D8EB;
        border: 1px solid #9EA8C6;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
        width: 20em;
        margin-bottom: 1em;
    }
    .example #demo em{
        font-size: 150%;
        font-style: normal;
        margin-right: 0.3em;
    }
    .example dt {
        font-weight: normal;
    }
    .example dd {
        font-size: 150%;
        line-height: 0.5em;
    }
    </style>

    <div id="demo">
        <p><em>Click me</em> to change my text color and show some style information.</p>
    </div>
    <dl>
        <dt>style.color</dt>
        <dd>black</dd>
        <dt>computedStyle.color</dt>
        <dd>rgb(0, 0, 0)</dd>
    </dl>

    <script type="text/javascript">
    YUI().use('node', function(Y) {
        var onClick = function(e) {
            var node = e.currentTarget;
                node.setStyle('color', 'red');
                var styleColor = node.getStyle('color'),
                    computedColor = node.getComputedStyle('color');

                Y.one('.example dl').setContent('<dt>style.color</dt><dd>' +
                styleColor + '</dd>' +
                '<dt>computedStyle.color</dt><dd>' +
                computedColor + '</dd>');
        };

        Y.one('#demo').on('click', onClick);
    });
    </script>