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
    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...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    CSS Background Animations

    Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

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!