YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Node Styling

## Node: Node Styling

This example shows how to style an element using Node.

View example in new window.

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

### 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>

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

<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;    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>');    }};

    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>');
        }
    };

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>'); } };

The last step is to assign the click handler.

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

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

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

### Full Script Source

    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');            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);});

    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');
                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);
    });

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'); 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); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings