docs/partials/properties-source.mustache

<style>
.example #corn{
    position: relative;
    background: url({{{componentAssets}}}/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("{{{componentAssets}}}/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.setContent(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.setContent('? ' + 'px'); // clear out the width label on the ruler
        }
    });
});
</script>