Element Object in Prototype Revised

One of my biggest peeves of Prototype was the singleton nature of the Element object. Doing Element.hide('myelement') just didn't feel right. Justin of Encytemedia has highlighted the recent updates which now allow for the much more elegant $('myelement').hide(). You'll need to download the latest version of Prototype (currently/still 1.5.0_pre0).

Justin also demonstrates the ability to extend the Element object with your own custom methods (which I appropriated):

   Custom = {
     contrast: function(element) {
       var actor = $(element);
       actor.setStyle({color: '#000', backgroundColor: 'yellow'});
       return actor;

   Object.extend(Element.Methods, Custom);

Object.extend() copies the properties of one object to another. In this example, Justin creates an object with one method and then uses Object.extend() to copy that method onto the Element.Methods object.

Published March 07, 2006 · Updated September 14, 2006
Categorized as JavaScript
Short URL: https://snook.ca/s/539


4 Comments · RSS feed
Colin D. Devroe said on March 07, 2006

Although this wasn't a "peeve" of mine. I can definitely appreciate the changes.

Dustin Diaz said on March 08, 2006

Well look, you got your wishes :) At the least you know you had the options of extending if yourself. That's always good.

Nico said on March 08, 2006

why you are using this link (to Ruby on Rails's Home Page)?

Why I can't download the 1.5.0_pre0 from tthe prototype's Home Page?

Jonathan Snook said on March 09, 2006

Only the latest non-beta version is available from the home page. I agree that they should put a link to the latest pre-release for those of us who like to play. :)

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.