Learn YUI3: Accessing Attributes of Element and changing it

Jan 10th, 2012

Here we will play with element's attribute. We will access attributes and change it. It is a part of YUI node learning series.

<img class="hotels" src="Marina-Bay-Sands_222812.jpg" widht="310" height="207" />
<button id="bttnImg">Change Image attributes (src, width and height)</button>

Y.one('#bttnImg').on('click', function(e) {

		var hotels = Y.all('.hotels');

		// get first one and start setting attributes
		hotels.item(0).set('src', 'san-alfonso.jpg');
		hotels.item(0).set('width', 400);
		hotels.item(0).set('height', 267);
		hotels.item(0).set('border', '1');		

		// Accessing elements attribute
		// Output to console log
		Y.log(hotels.item(0).get('src')); // http://localhost/YUIMac/san-alfonso.jpg ? I expected san-alfonso.jpg

		// Disables the button
		e.target.set('disabled', 'disabled');

	});

Extra:
How to get parent node of an element?
// Extra
Y.log(hotels.item(0).get('parentNode')); // example = BODY