YUI 3.x Home -

YUI Library Examples: Node: Node Styling

Node: Node Styling

This example shows how to style an element using Node.

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

Setting up the HTML

First we need some HTML to work with.

  1. <div id="demo">
  2. <p>Click me to change my color and show some style information.</p>
  3. </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.

  1. var onClick = function(e) {
  2. var node = e.currentTarget;
  3. if (!node.one('dl')) { // only create the DL once
  4. node.setStyle('color', 'green');
  5. var styleColor = node.getStyle('color'),
  6. computedColor = node.getComputedStyle('color');
  7.  
  8. node.append('<dl>' +
  9. '<dt>style.color</dt><dd>' + styleColor + '</dd>' +
  10. '<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +
  11. '</dl>');
  12. }
  13. };
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.

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

Full Script Source

  1. YUI().use('node', function(Y) {
  2. var onClick = function(e) {
  3. var node = e.currentTarget;
  4. if (!node.one('dl')) { // only create the DL once
  5. node.setStyle('color', 'green');
  6. node.setStyle('color', 'green');
  7. var styleColor = node.getStyle('color'),
  8. computedColor = node.getComputedStyle('color');
  9.  
  10. node.append('<dl>' +
  11. '<dt>style.color</dt><dd>' + styleColor + '</dd>' +
  12. '<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +
  13. '</dl>');
  14. }
  15. };
  16.  
  17. Y.one('#demo').on('click', onClick);
  18. });
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