Implementing .css() and .attr() in MooTools 1.2.3

By  on  

Very rarely does a developer have the ability to work with just one framework. Often a developer needs to float between MooTools and jQuery. As you can imagine, doing so can make a developer loopy due to the syntax difference. One of the small differences that gets used often is jQuery's attr() and css() vs. MooTools' set() and setStyle(). I've implemented css() and attr() into MooTools for jQuery users.

The MooTools JavaScript Code

/* implement */
Element.implement({
	css: function(property,value) {
		var type = $type(property);
		if(value == undefined && type != 'object') {
			return this.getStyle(property);
		}
		else {
			var pvs = property;
			if(type != 'object') { pvs = {}; pvs[property] = value; }
			return this.setStyles(pvs);
		}
	},
	attr: function(property,value) {
		var type = $type(property);
		if(value == undefined && type != 'object') {
			return this.get(property);
		}
		else {
			var pvs = property;
			if(type != 'object') { pvs = {}; pvs[property] = value; }
			return this.set(pvs);
		}
	}
});

/* css testing! */
//will return "200px"
console.log('css(width) = ' + $('subject').css('width'));
//will set width value to "500px"
console.log('css(width,500) = ' + $('subject').css('width',500));
//will set width value to "700px"
console.log('css(width,700) = ' + $('subject').css({width:700}));

/* attr testing! */
//will return "moo"
console.log('attr(rel) = ' + $('subject').attr('rel'));
//will set width value to "500px"
console.log('attr(rel,mootools) = ' + $('subject').attr('rel','mootools') + ' :: ' + $('subject').attr('rel'));
//will set width value to "700px"
console.log('attr(rel,mootools ftw!) = ' + $('subject').attr({rel:'mootools ftw'}) + ' :: ' + $('subject').attr('rel')

I personally don't prefer this syntax in MooTools but hopefully this helps someone!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

Incredible Demos

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

  1. While this is cool to show off MooTools’ flexibility, the verbs set/get are useful because, well, they are verbs and the user can easily tell their purpose. There is no way that id see a css() method and know that it acts as both the getter and setter. People who would find this useful should just use jQuery.

    Your code does illustrate a good point — setStyle and setStyles could probably be combined into a single method — probably.

  2. I agree with Em, while the simplicity is nice in JQuery, the MooTools functions use logical naming conventions

  3. I use the below to speed up logging :) Hope it helps someone.

    Window.implement({
        'log':    function() {
                      return console && console.log ? console.log : new function(){};
                  }()
    });
    
  4. I also agree with Em. Combining the setStyle and setStyles function would be cool and also could lead to a bigger flexibility imo.

    The naming convention of mootools is much better in this example. Regardless of knowing the framework or not, every programmer does instantly understand what the code is “doing”.

    Another demonstration of mootools > all ;)

  5. fsdgdf

    niec..

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!