Comments on: Create Custom Element Property Getters and Setters with MooTools

By: Dan Parnham

Dan Parnham — Thu, 24 Feb 2011 15:07:22 +0000

I know this article was from a while ago, but I’ve just discovered it and it is relevant to something I have been attempting recently.

You asked if there are any other items we would like in the properties set and my suggestion is this:

Element.Properties.children = { get: function() { return this.getChildren(); }, set: function(value) { this.adopt(value); } };

which would then allow you to instantiate more complex Element hierarchies as follows:

new Element('div.background', { children: [ new Element('div.container', { children: [ new Element('div.window', { children: [ new Element('h1', { text: 'A title' }), new Element('div.content'), new Element('div.bar', { children: [ new Element('button', { text: 'OK', events: { ... }}), new Element('button', { text: 'Cancel', events: { ... }}) ]}) ]}) ]}) ]});

With this you can easily see (and modify) the hierarchy instead of having to follow through all of the inject/adopt/grab calls.

Regards,
Dan

By: David Walsh

David Walsh — Mon, 10 May 2010 16:42:06 +0000

@Bill: Like this:


var parent = document.id('myElement').get('parent').get('id');

By: Bill

Bill — Mon, 10 May 2010 16:33:07 +0000

How do I get just the parent id, not the parent?

By: Arian

Arian — Mon, 03 May 2010 21:11:41 +0000

@Marcel: You can do that with Element.Styles: http://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Style.js#L137

Something like this:
http://jsfiddle.net/8Ks4X/1/

By: Marcel

Marcel — Mon, 03 May 2010 18:48:31 +0000

I was asking yesterday on the mootools irc channel if there is a way to add a property to css properties so I can do something similar, tweening -webkit-box-shadow and -moz-box-shadow, only using one property, like this:

el.tween(‘box-shadow’, xxx);

Do you know if this is possible?