#

# Example: Set and Get Properties

This example demonstrates how to retrieve and use a `Node` instance and access DOM properties.

Press a button to get or set the `offsetWidth` of the `div` containing the corn image.

? px
Width: px
Image derived from "ear of corn", by normanack

## Setting up the HTML

    <div id="ruler"></div>
    <div id="corn">
        <div class="ruler-marker"></div>
        <div id="output">? px</div>
    </div>
    <label>Width:</label>
    <input id="input" size="2" value="550"> px
    <button class="yui3-button btn-set">Set</button>
    <button class="yui3-button btn-get">Get</button>

## Getting a Node Instance

The `Y.one` method accepts a Selector or HTML element and returns a Node instance. First we'll set up some variables for the node's representing our HTML.

    var corn = Y.one('#corn'),
        input = Y.one('.example #input'),
        output = Y.one('.example #output');

## Accessing Node Properties

The properties of a node can be accessed via its `set` and `get` methods.

In most cases, simple type of properties (strings, numbers, Booleans) pass directly to/from the underlying DOM node, however properties representing other DOM nodes return `Node` or `NodeList` instances.

### The Get Method

We can use the `get` method to read the `offsetWidth` of the `div` containing the corn image, which includes the style width, padding, and border.

    width = corn.get('offsetWidth');

### The Set Method

The Set method can be used to set the value of objects

    input.set('value', 237);

The `offsetWidth` property of an HTML element is read only, however YUI makes this writeable. This assures that the final `offsetWidth` matches the value that is set, regardless of borders, padding, or box model.

    corn.set('offsetWidth', value);

## Listening for Node Events

We will update the value `offsetWidth` property of the `div` containing the corn image when the Set button is pressed.

    Y.one('.example .btn-set').on('click', function(e) {
        ...
        corn.set('offsetWidth', value);
        ...
    };

## Complete Example Source

    <style>
    .example #corn{
        position: relative;
        background: url(../assets/node/images/corn.jpg);
        width: 232px;
        height: 181px;
        -moz-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
        margin: 2px 0 1em;
        border: none;
    }
    .example #ruler{
        width: 650px;
        height: 42px;
        background: url("../assets/node/images/ruler_ticks.png") repeat-x scroll -1px 24px #DDCEB7;
    }
    .example .yui3-button {
        margin: 0 0.2em;
    }
    .example .btn-get{
        margin-left: 4em;
    }
    #input {
        height: 1.6em;
        width: 4em;
    }
    #output{
        position: absolute;
        top: -40px;
        width: 100px;
        height: 40px;
        right: -50px;
        text-align: center;
        cursor: pointer;
    }
    #corn .ruler-marker{
        position: absolute;
        top:  -20px;
        right: 0;
        height: 30px;
        border-right: solid 1px #f00;
    }
    </style>

    <body>
        <div id="ruler"></div>
        <div id="corn">
            <div class="ruler-marker"></div>
            <div id="output">? px</div>
        </div>
        <label>Width:</label>
        <input id="input" size="2" value="550"> px
        <button class="yui3-button btn-set">Set</button>
        <button class="yui3-button btn-get">Get</button>
    <script>
    YUI().use('node', 'button', function(Y) {
        var corn = Y.one('#corn'),
            input = Y.one('.example #input'),
            output = Y.one('.example #output');

        var getWidth = function(){
           var width = corn.get('offsetWidth');
           output.setHTML(width + 'px'); // display width near the get button
        }

        Y.one('.example .btn-get').on('click', getWidth);
        output.on('click', getWidth); // also allows getting width by clicking on ruler width label

        Y.one('.example .btn-set').on('click', function(e) {
            var value = input.get('value'),
                width = corn.get('offsetWidth');
            if (value == '') {
                input.set('value', width);
            } else if (!isNaN(parseInt(value))) { // if the value in the input is a number
                corn.set('offsetWidth', value);
                output.setHTML('? ' + 'px'); // clear out the width label on the ruler
            }
        });
    });
    </script>