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>