Example: Node Styling

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>