properties.mustache revision 4b5178c91f1de373c48d03d7675924a83f5573e5
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<div class="intro">
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <p>This example demonstrates how to retrieve and use a `Node` instance
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots and access DOM properties.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <p>Press a button to get or set the `offsetWidth` of the `div`
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots containing the corn image.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<div class="example">
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots{{>properties-source}}
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<div style="color:#aaa; display:block; font-size:90%; margin-top:1em;">Image derived from
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<a href="http://www.flickr.com/photos/29278394@N00/3934433763/" target="_blank">
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots"ear of corn"</a>, by normanack</div>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h2>Setting up the HTML</h2>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <div id="ruler"></div>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <div id="corn"></div>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <label>Width:</label>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <input id="input" size="2" value="510"> px
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <button class="yui3-button btn-set">Set</button>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <button class="yui3-button btn-get">Get</button>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <label>Width:</label>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots <span id="output"></span>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h2>Getting a Node Instance</h2>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>The `Y.one` method accepts a Selector or HTML element and
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsreturns a Node instance. First we'll set up some variables
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsfor the node's representing our HTML.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsvar corn = Y.one('#corn'),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots getButton = Y.one('.example .btn-get'),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots setButton = Y.one('.example .btn-set'),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots input = Y.one('.example #input'),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots output = Y.one('.example #output');
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h2>Accessing Node Properties</h2>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>The properties of a node can be accessed via its `set` and
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots`get` methods.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>In most cases, simple type of properties (strings, numbers, booleans)
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootspass directly to/from the underlying DOM node, however properties representing
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsother DOM nodes return `Node` or `NodeList` instances.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h3>The Get Method</h3>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>We can use the `get` method to read the `offsetWidth` of the `div`
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootscontaining the corn image,
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootswhich includes the style width, padding, and border.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootswidth = corn.get('offsetWidth');
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h3>The Set Method</h3>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>The Set method can be used to set the value of objects
e456dceed80992a528fd8dfed0ebedf3598a4adbTodd Klootsinput.set('value', 237);
e456dceed80992a528fd8dfed0ebedf3598a4adbTodd Kloots<p>The `offsetWidth` property of an HTML element is read only, however YUI
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsmakes this writeable. This assures that the final `offsetWidth`
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootsmatches the value that is set, regardless of borders, padding, or box model.</p>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootscorn.set('offsetWidth', value);
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h2>Listening for Node Events</h2>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<p>We will update the value `offsetWidth` property of the `div`
68b1d15dad8af70374cec83a13758dce5621de1dTodd Klootscontaining the corn image when the Set button is pressed.
68b1d15dad8af70374cec83a13758dce5621de1dTodd KlootsY.one('.btn-set').on('click', function(e) {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots corn.set('offsetWidth', value);
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots<h2>Complete Example Source</h2>
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots{{>properties-source}}